Adobe Spectrum Logospectrum-css 2.10.0

Spectrum
4

Accordion
Precursor
CSS Unverified

The default variant of accordion

While remaining backward compatible, the recommended markup has been updated to implement the WAI-ARIA 1.1 Accordion design pattern to better support accessibility for keyboard and screen reader users.

Show Markup 
<!-- WAI-ARIA 1.1: Accordion container role changed from "tablist" to "region" -->
<div class="spectrum-Accordion" role="region">
  <div class="spectrum-Accordion-item is-open" role="presentation">

    <!-- WAI-ARIA 1.1: Item header is a <button> wrapped within a <h3> element, rather than a <div> element with role="tab" -->
    <h3 class="spectrum-Accordion-itemHeading">
      <!-- WAI-ARIA 1.1: Item header <button> uses aria-expanded attribute to indicate expanded state. -->
      <button class="spectrum-Accordion-itemHeader" type="button" id="spectrum-accordion-item-0-header" aria-controls="spectrum-accordion-item-0-content" aria-expanded="true">Recent</button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-Accordion-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
      </svg>
    </h3>

    <!-- WAI-ARIA 1.1: Item content role changed from "tabpanel" to "region" -->
    <div class="spectrum-Accordion-itemContent" role="region" id="spectrum-accordion-item-0-content" aria-labelledby="spectrum-accordion-item-0-header">Item 1</div>
  </div>
  <div class="spectrum-Accordion-item is-disabled" role="presentation">
    <h3 class="spectrum-Accordion-itemHeading">
      <button class="spectrum-Accordion-itemHeader" type="button" disabled id="spectrum-accordion-item-1-header" aria-controls="spectrum-accordion-item-1-content" aria-expanded="false">Architecture</button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-Accordion-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
      </svg>
    </h3>
    <div class="spectrum-Accordion-itemContent" role="region" id="spectrum-accordion-item-1-content" aria-labelledby="spectrum-accordion-item-1-header">Item 2</div>
  </div>
  <div class="spectrum-Accordion-item" role="presentation">
    <h3 class="spectrum-Accordion-itemHeading">
      <button class="spectrum-Accordion-itemHeader" type="button" id="spectrum-accordion-item-2-header" aria-controls="spectrum-accordion-item-2-content" aria-expanded="false">Nature</button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-Accordion-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
      </svg>
    </h3>
    <div class="spectrum-Accordion-itemContent" role="region" id="spectrum-accordion-item-2-content" aria-labelledby="spectrum-accordion-item-2-header">Item 3</div>
  </div>
  <div class="spectrum-Accordion-item" role="presentation">
    <h3 class="spectrum-Accordion-itemHeading">
      <button class="spectrum-Accordion-itemHeader" type="button" id="spectrum-accordion-item-3-header" aria-controls="spectrum-accordion-item-3-content" aria-expanded="false">Really Long Accordion Item According to Our Predictions</button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-Accordion-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
      </svg>
    </h3>
    <div class="spectrum-Accordion-itemContent" role="region" id="spectrum-accordion-item-3-content" aria-labelledby="spectrum-accordion-item-3-header">Item 4</div>
  </div>
</div>

Action Button
Canon
CSS Verified

The default variant of Action Button









Show Markup 
<button class="spectrum-ActionButton">
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton is-selected">
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton" disabled>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton is-selected" disabled>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>

<br><br>

<button class="spectrum-ActionButton">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton is-selected" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>

<br><br>

<button class="spectrum-ActionButton">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
</button>
<button class="spectrum-ActionButton is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
</button>
<button class="spectrum-ActionButton" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
</button>
<button class="spectrum-ActionButton is-selected" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
</button>

<br><br>

<button class="spectrum-ActionButton">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>
<button class="spectrum-ActionButton is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>
<button class="spectrum-ActionButton" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>
<button class="spectrum-ActionButton is-selected" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>

<br><br>

<button class="spectrum-ActionButton">
  <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
    <g fill-rule="evenodd">
      <path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
      <polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
      <polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
      <polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
      <polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
      <polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
      <polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
      <polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
      <polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
      <polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
      <polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
      <polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
      <polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
    </g>
  </svg>
  <span class="spectrum-ActionButton-label">Button</span>
</button>

<button class="spectrum-ActionButton is-selected">
  <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
    <g fill-rule="evenodd">
      <path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
      <polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
      <polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
      <polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
      <polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
      <polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
      <polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
      <polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
      <polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
      <polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
      <polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
      <polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
      <polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
    </g>
  </svg>
  <span class="spectrum-ActionButton-label">Button</span>
</button>

<button class="spectrum-ActionButton" disabled>
  <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
    <g fill-rule="evenodd">
      <path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
      <polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
      <polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
      <polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
      <polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
      <polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
      <polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
      <polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
      <polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
      <polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
      <polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
      <polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
      <polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
    </g>
  </svg>
  <span class="spectrum-ActionButton-label">Button</span>
</button>


<button class="spectrum-ActionButton is-selected" disabled>
  <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
    <g fill-rule="evenodd">
      <path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
      <polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
      <polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
      <polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
      <polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
      <polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
      <polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
      <polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
      <polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
      <polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
      <polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
      <polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
      <polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
    </g>
  </svg>
  <span class="spectrum-ActionButton-label">Button</span>
</button>

Action Button - Quiet
Canon
CSS Verified

An Actionbutton that is quiet





Show Markup 
<button class="spectrum-ActionButton spectrum-ActionButton--quiet">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>

<br><br>

<button class="spectrum-ActionButton spectrum-ActionButton--quiet">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
</button>

<br><br>

<button class="spectrum-ActionButton spectrum-ActionButton--quiet">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>

Action Menu
Beta Precursor
CSS Unverified

Simply an action button with a Popover. Note that the is-selected class should be applied to the button when the menu is open. Also note the accessibility roles are different for an action menu vs a normal menu.



Show Markup 
<button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-More" />
  </svg>
  <span class="spectrum-ActionButton-label">More Actions</span>
</button>
<br>

<div class="spectrum-Popover spectrum-Popover--bottom is-open">
  <ul class="spectrum-Menu" role="menu">
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 1</span>
    </li>
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 2</span>
    </li>
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 3</span>
    </li>
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 4</span>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>

<button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-More" />
  </svg>
</button>
<br>

<div class="spectrum-Popover spectrum-Popover--bottom is-open">
  <ul class="spectrum-Menu" role="menu">
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 1</span>
    </li>
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 2</span>
    </li>
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 3</span>
    </li>
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 4</span>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>

<button class="spectrum-ActionButton spectrum-ActionButton--quiet">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-More" />
  </svg>
  <span class="spectrum-ActionButton-label">More Actions</span>
</button>

Alert - Closable
Beta Precursor
CSS Unverified

An Alert with a close button in the footer. Combine this strategy with any variant.

Incorrect Payment Information - Error
This is an alert.
Show Markup 
<div class="spectrum-Alert spectrum-Alert--error">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Alert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertMedium" />
  </svg>
  <div class="spectrum-Alert-header">Incorrect Payment Information - Error</div>
  <div class="spectrum-Alert-content">This is an alert.</div>
  <div class="spectrum-Alert-footer">
    <button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet">Close</button>
  </div>
</div>

Alert - Error
Precursor
CSS Unverified

The error variant of Alert

Error Alert - Oh no
This is an alert.
Show Markup 
<div class="spectrum-Alert spectrum-Alert--error">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Alert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertMedium" />
  </svg>
  <div class="spectrum-Alert-header">Error Alert - Oh no</div>
  <div class="spectrum-Alert-content">This is an alert.</div>
</div>

Alert - Help
Precursor
CSS Unverified

The help variant of Alert

Infomation Alert Header
This is an alert.
Show Markup 
<div class="spectrum-Alert spectrum-Alert--help">
  <svg class="spectrum-Icon spectrum-UIIcon-HelpMedium spectrum-Alert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-HelpMedium" />
  </svg>
  <div class="spectrum-Alert-header">Infomation Alert Header</div>
  <div class="spectrum-Alert-content">This is an alert.</div>
</div>

Alert - Info
Precursor
CSS Unverified

The info variant of Alert

Infomation Alert Header
This is an alert.
Show Markup 
<div class="spectrum-Alert spectrum-Alert--info">
  <svg class="spectrum-Icon spectrum-UIIcon-InfoMedium spectrum-Alert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-InfoMedium" />
  </svg>
  <div class="spectrum-Alert-header">Infomation Alert Header</div>
  <div class="spectrum-Alert-content">This is an alert.</div>
</div>

Alert - Success
Precursor
CSS Unverified

The success variant of Alert

Successful Alert Header
This is an alert.
Show Markup 
<div class="spectrum-Alert spectrum-Alert--success">
  <svg class="spectrum-Icon spectrum-UIIcon-SuccessMedium spectrum-Alert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-SuccessMedium" />
  </svg>
  <div class="spectrum-Alert-header">Successful Alert Header</div>
  <div class="spectrum-Alert-content">This is an alert.</div>
</div>

Alert - Warning
Precursor
CSS Unverified

The warning variant of Alert

Warning Alert Header
This is an alert.
Show Markup 
<div class="spectrum-Alert spectrum-Alert--warning">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Alert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertMedium" />
  </svg>
  <div class="spectrum-Alert-header">Warning Alert Header</div>
  <div class="spectrum-Alert-content">This is an alert.</div>
</div>

Asset List
Beta Precursor
CSS Unverified

A selectable list of Assets, often used inside of Miller Columns.

  • Shantanu.jpg
  • Resource Allocation.csv
  • Frontend Projects
Show Markup 
<ul class="spectrum-AssetList">
  <li class="spectrum-AssetList-item is-selectable" tabindex="0">
    <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" tabindex="-1">
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
        </svg>
      </span>
    </label>
    <img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
    <span class="spectrum-AssetList-itemLabel">Shantanu.jpg</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
    </svg>
  </li>
  <li class="spectrum-AssetList-item is-selectable" tabindex="0">
    <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" tabindex="-1">
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
        </svg>
      </span>
    </label>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-AssetList-itemThumbnail" focusable="false" aria-hidden="true" aria-label="FileCSV">
      <use xlink:href="#spectrum-icon-24-FileCSV"></use>
    </svg>
    <span class="spectrum-AssetList-itemLabel">Resource Allocation.csv</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
    </svg>
  </li>
  <li class="spectrum-AssetList-item is-branch is-selectable is-selected" tabindex="0">
    <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" tabindex="-1" checked>
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
        </svg>
      </span>
    </label>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-AssetList-itemThumbnail" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-24-Folder"></use>
    </svg>
    <span class="spectrum-AssetList-itemLabel">Frontend Projects</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
    </svg>
  </li>
</ul>

Avatar
Canon
CSS Verified

The small variant of Avatar

Avatar Disabled Avatar
Show Markup 
<img class="spectrum-Avatar" src="img/example-ava.jpg" alt="Avatar">
<img class="spectrum-Avatar is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">

The Spectrum banner 'corner placement'

Most Popular
Includes Illustrator CC
Show Markup 
<div style="width: 255px; height: 325px; background-color: #ccc; position: relative;">
  <div class="spectrum-Banner spectrum-Banner--info spectrum-Banner--corner">
    <div class="spectrum-Banner-header">Most Popular</div>
    <div class="spectrum-Banner-content">Includes Illustrator CC</div>
  </div>
</div>

The error variant of Banner

Purchase Soon
Trial expires in 2 days
Show Markup 
<div class="spectrum-Banner spectrum-Banner--error">
  <div class="spectrum-Banner-header">Purchase Soon</div>
  <div class="spectrum-Banner-content">Trial expires in 2 days</div>
</div>

The info variant of Banner

Most Popular
Includes Illustrator CC
Show Markup 
<div class="spectrum-Banner spectrum-Banner--info">
  <div class="spectrum-Banner-header">Most Popular</div>
  <div class="spectrum-Banner-content">Includes Illustrator CC</div>
</div>

The warning variant of Banner

Purchase Soon
Your trial is about to expire
Show Markup 
<div class="spectrum-Banner spectrum-Banner--warning">
  <div class="spectrum-Banner-header">Purchase Soon</div>
  <div class="spectrum-Banner-content">Your trial is about to expire</div>
</div>

Bar Loader
Canon
CSS Unverified

Large variant of Bar Loader. A bar loader shows the progression of an operation.

Loading
50%
Loading
50%
Show Markup 
<div style="width: 200px; height: 25px; padding-top: 10px;">
  <div class="spectrum-BarLoader" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 50%;"></div>
    </div>
    <div class="spectrum-BarLoader-label" hidden=""></div>
  </div>
</div>
<div style="margin: 20px 0;">
  <div class="spectrum-BarLoader" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-label">Loading</div>
    <div class="spectrum-BarLoader-percentage">50%</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 50%;"></div>
    </div>
  </div>
</div>
<div style="margin: 20px 0;">
  <div class="spectrum-BarLoader spectrum-BarLoader--sideLabel" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-label">Loading</div>
    <div class="spectrum-BarLoader-percentage">50%</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 50%;"></div>
    </div>
  </div>
</div>

Bar Loader - Indeterminate
Canon
CSS Unverified

Indeterminate variant of Bar Loader. An indeterminate bar loader shows the progression without a known total (time or size).

Loading
Show Markup 
<div style="width: 200px; height: 25px; padding-top: 10px;">
  <div class="spectrum-BarLoader spectrum-BarLoader--indeterminate">
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill"></div>
    </div>
    <div class="spectrum-BarLoader-label" hidden=""></div>
  </div>
</div>
<div style="margin: 20px 0;">
  <div class="spectrum-BarLoader spectrum-BarLoader--indeterminate">
    <div class="spectrum-BarLoader-label">Loading</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill"></div>
    </div>
  </div>
</div>

Bar Loader - Indeterminate Small
Canon
CSS Unverified

Indeterminate variant of Bar Loader. An indeterminate bar loader shows the progression without a known total (time or size).

Loading
Show Markup 
<div style="width: 200px; height: 25px; padding-top: 10px;">
  <div class="spectrum-BarLoader spectrum-BarLoader--small spectrum-BarLoader--indeterminate">
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill"></div>
    </div>
    <div class="spectrum-BarLoader-label" hidden=""></div>
  </div>
</div>
<div style="margin: 20px 0;">
  <div class="spectrum-BarLoader spectrum-BarLoader--small spectrum-BarLoader--indeterminate">
    <div class="spectrum-BarLoader-label">Loading</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill"></div>
    </div>
  </div>
</div>

Bar Loader - Meter
Beta Precursor
CSS Unverified
Storage Space
50%
Storage Space
80%
Storage Space
90%
Show Markup 
<div style="margin: 20px 0;">
  <div class="spectrum-BarLoader is-positive" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-label">Storage Space</div>
    <div class="spectrum-BarLoader-percentage">50%</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 50%;"></div>
    </div>
  </div>
</div>
<div style="margin: 20px 0;">
  <div class="spectrum-BarLoader is-warning" value="80" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-label">Storage Space</div>
    <div class="spectrum-BarLoader-percentage">80%</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 80%;"></div>
    </div>
  </div>
</div>
<div style="margin: 20px 0;">
  <div class="spectrum-BarLoader is-critical" value="90" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-label">Storage Space</div>
    <div class="spectrum-BarLoader-percentage">90%</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 90%;"></div>
    </div>
  </div>
</div>

Bar Loader - Over Background
Canon
CSS Unverified

The Large Over Color variant of Bar Loader. A bar loader shows the progression of an operation.

Loading
50%
Show Markup 
<div style="width: 400px; height: 200px; background-color: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;">
  <div>
    <div class="spectrum-BarLoader spectrum-BarLoader--overBackground" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
      <div class="spectrum-BarLoader-label">Loading</div>
      <div class="spectrum-BarLoader-percentage">50%</div>
      <div class="spectrum-BarLoader-track">
        <div class="spectrum-BarLoader-fill" handle="status" style="width: 50%;"></div>
      </div>
    </div>
  </div>
</div>

Bar Loader - Over Background Small
Canon
CSS Unverified

The small, over color variant of a Bar Loader. A bar loader shows the progression of an operation.

Loading
50%
Show Markup 
<div style="width: 400px; height: 200px; background-color: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;">
  <div>
    <div class="spectrum-BarLoader spectrum-BarLoader--small spectrum-BarLoader--overBackground" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
      <div class="spectrum-BarLoader-label">Loading</div>
      <div class="spectrum-BarLoader-percentage">50%</div>
      <div class="spectrum-BarLoader-track">
        <div class="spectrum-BarLoader-fill" handle="status" style="width: 50%;"></div>
      </div>
    </div>
  </div>
</div>

Bar Loader - Small
Canon
CSS Unverified

The small variant of Bar Loader. A bar loader shows the progression of an operation.

Loading
50%
Loading
50%
Show Markup 
<div style="width: 200px; height: 25px; padding-top: 10px;">
  <div class="spectrum-BarLoader spectrum-BarLoader--small" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 50%;"></div>
    </div>
    <div class="spectrum-BarLoader-label" hidden=""></div>
  </div>
</div>
<div style="margin: 20px 0;">
  <div class="spectrum-BarLoader spectrum-BarLoader--small" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-label">Loading</div>
    <div class="spectrum-BarLoader-percentage">50%</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 50%;"></div>
    </div>
  </div>
</div>
<div style="margin: 50px 0;">
  <div class="spectrum-BarLoader spectrum-BarLoader--small spectrum-BarLoader--sideLabel" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-label">Loading</div>
    <div class="spectrum-BarLoader-percentage">50%</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 50%;"></div>
    </div>
  </div>
</div>

The default variant of Breadcrumb

Show Markup 
<nav>
  <ul class="spectrum-Breadcrumbs">
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" href="#">Shoes</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Nike</div>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Mens</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">Summer 2016</a>
    </li>
  </ul>
</nav>

Breadcrumbs - Title
Deprecated

This variant replaced with Multiline variant

Show Markup 
<nav>
  <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--title">
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" href="#">Home</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Playground</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <h1 class="spectrum-Heading--pageTitle">
        <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">Sliders</a>
      </h1>
    </li>
  </ul>
</nav>

Button - CTA
Canon
CSS Verified

Actions that require high visibility

Show Markup 
<button class="spectrum-Button spectrum-Button--cta">
  <span class="spectrum-Button-label">Button</span>
</button>
<button class="spectrum-Button spectrum-Button--cta" disabled>
  <span class="spectrum-Button-label">Button</span>
</button>

Button - Over Background
Canon
CSS Verified

For any button used on top of a background

A Spectrum button that's meant to be placed over a non-standard color. In order to implement this button, you must set the CSS color property of a parent element to the same value as the background the button is placed against.

Show Markup 
<div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px; display: inline-block;">
  <button class="spectrum-Button spectrum-Button--overBackground">
    <span class="spectrum-Button-label">Button</span>
  </button>

  <button class="spectrum-Button spectrum-Button--overBackground" disabled>
    <span class="spectrum-Button-label">Button</span>
  </button>
</div>

Button - Primary
Canon
CSS Verified

For primary user actions



Button Button



Edit Edit
Show Markup 
<button class="spectrum-Button spectrum-Button--primary">
  <span class="spectrum-Button-label">Button</span>
</button>

<button class="spectrum-Button spectrum-Button--primary" disabled>
  <span class="spectrum-Button-label">Button</span>
</button>

<br><br>

<a role="button" href="#" class="spectrum-Button spectrum-Button--primary">
  <span class="spectrum-Button-label">Button</span>
</a>

<a role="button" class="spectrum-Button spectrum-Button--primary is-disabled">
  <span class="spectrum-Button-label">Button</span>
</a>

<br><br>

<button class="spectrum-Button spectrum-Button--primary">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-Button-label">Edit</span>
</button>

<button class="spectrum-Button spectrum-Button--primary" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-Button-label">Edit</span>
</button>

<br><br>

<a class="spectrum-Button spectrum-Button--primary">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-Button-label">Edit</span>
</a>

<a class="spectrum-Button spectrum-Button--primary is-disabled">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-Button-label">Edit</span>
</a>

Button - Quiet Over Background
Canon
CSS Verified

For any quiet button used on top of a background

A Spectrum quiet button that's meant to be placed over a non-standard color. In order to implement this button, you must set the CSS color property of a parent element to the same value as the background the button is placed against.

Show Markup 
<div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px; display: inline-block;">
  <button class="spectrum-Button spectrum-Button--overBackground spectrum-Button--quiet">
    <span class="spectrum-Button-label">Button</span>
  </button>

  <button class="spectrum-Button spectrum-Button--overBackground spectrum-Button--quiet" disabled>
    <span class="spectrum-Button-label">Button</span>
  </button>
</div>

Button - Quiet Primary
Canon
CSS Verified

For primary user actions

Show Markup 
<button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet">
  <span class="spectrum-Button-label">Button</span>
</button>

<button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet" disabled>
  <span class="spectrum-Button-label">Button</span>
</button>

Button - Quiet Secondary
Canon
CSS Verified

For secondary user actions

Show Markup 
<button class="spectrum-Button spectrum-Button--secondary spectrum-Button--quiet">
  <span class="spectrum-Button-label">Button</span>
</button>

<button class="spectrum-Button spectrum-Button--secondary spectrum-Button--quiet" disabled>
  <span class="spectrum-Button-label">Button</span>
</button>

Button - Quiet Warning
Canon
CSS Verified

For destructive actions

Show Markup 
<button class="spectrum-Button spectrum-Button--warning spectrum-Button--quiet">
  <span class="spectrum-Button-label">Button</span>
</button>

<button class="spectrum-Button spectrum-Button--warning spectrum-Button--quiet" disabled>
  <span class="spectrum-Button-label">Button</span>
</button>

Button - Secondary
Canon
CSS Verified

For secondary user actions

Show Markup 
<button class="spectrum-Button spectrum-Button--secondary">
  <span class="spectrum-Button-label">Button</span>
</button>

<button class="spectrum-Button spectrum-Button--secondary" disabled>
  <span class="spectrum-Button-label">Button</span>
</button>

Button - Warning
Canon
CSS Verified

For actions that are destructive

Show Markup 
<button class="spectrum-Button spectrum-Button--warning">
  <span class="spectrum-Button-label">Button</span>
</button>

<button class="spectrum-Button spectrum-Button--warning" disabled>
  <span class="spectrum-Button-label">Button</span>
</button>

Button Group
Canon
CSS Unverified

Group of buttons






Show Markup 
<div class="spectrum-ButtonGroup">
  <button class="spectrum-ActionButton">
    <span class="spectrum-ActionButton-label">Normal</span>
  </button>
  <button class="spectrum-ActionButton is-selected">
    <span class="spectrum-ActionButton-label">Selected</span>
  </button>
  <button class="spectrum-ActionButton" disabled>
    <span class="spectrum-ActionButton-label">Disabled</span>
  </button>
  <button class="spectrum-ActionButton is-selected" disabled>
    <span class="spectrum-ActionButton-label">Disabled Selected</span>
  </button>
</div>

<br>

<div class="spectrum-ButtonGroup">
  <button class="spectrum-ActionButton">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
  <button class="spectrum-ActionButton is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
  <button class="spectrum-ActionButton" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
  <button class="spectrum-ActionButton is-selected" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
</div>

<br>

<div class="spectrum-ButtonGroup">
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
    <span class="spectrum-ActionButton-label">Normal</span>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
    <span class="spectrum-ActionButton-label">Selected</span>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet" disabled>
    <span class="spectrum-ActionButton-label">Disabled</span>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected" disabled>
    <span class="spectrum-ActionButton-label">Disabled Selected</span>
  </button>
</div>

<br>

<div class="spectrum-ButtonGroup">
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
</div>

<br><br>

<div class="spectrum-ButtonGroup">
  <button class="spectrum-Tool">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Brush">
      <use xlink:href="#spectrum-icon-18-Brush" />
    </svg>
  </button>

  <button class="spectrum-Tool is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
      <use xlink:href="#spectrum-icon-18-Select" />
    </svg>
  </button>

  <button class="spectrum-Tool" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
      <use xlink:href="#spectrum-icon-18-Select" />
    </svg>
  </button>

  <button class="spectrum-Tool is-selected" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
      <use xlink:href="#spectrum-icon-18-Select" />
    </svg>
  </button>
</div>

Button Group (vertical)
Beta Precursor
CSS Unverified
Show Markup 

<div style="display: flex; justify-content: space-between; width: 400px;">

  <div class="spectrum-ButtonGroup spectrum-ButtonGroup--vertical">
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Properties">
        <use xlink:href="#spectrum-icon-18-Properties" />
      </svg>
      <span class="spectrum-ActionButton-label">Properties</span>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Info">
        <use xlink:href="#spectrum-icon-18-Info" />
      <span class="spectrum-ActionButton-label">Info</span>
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="ViewAllTags">
        <use xlink:href="#spectrum-icon-18-ViewAllTags" />
      <span class="spectrum-ActionButton-label">Keywords</span>
      </svg>
    </button>
  </div>

  <div class="spectrum-ButtonGroup spectrum-ButtonGroup--vertical">
    <button class="spectrum-ActionButton">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
    <button class="spectrum-ActionButton is-selected">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
    <button class="spectrum-ActionButton" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
    <button class="spectrum-ActionButton is-selected" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
  </div>

  <div class="spectrum-ButtonGroup spectrum-ButtonGroup--vertical">
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
  </div>

  <div class="spectrum-ButtonGroup spectrum-ButtonGroup--vertical">
    <button class="spectrum-Tool">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Brush">
        <use xlink:href="#spectrum-icon-18-Brush" />
      </svg>
    </button>

    <button class="spectrum-Tool is-selected">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
        <use xlink:href="#spectrum-icon-18-Select" />
      </svg>
    </button>

    <button class="spectrum-Tool" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
        <use xlink:href="#spectrum-icon-18-Select" />
      </svg>
    </button>

    <button class="spectrum-Tool is-selected" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
        <use xlink:href="#spectrum-icon-18-Select" />
      </svg>
    </button>
  </div>

</div>

Calendar
Precursor
CSS Unverified

The default Calendar element

August 2017
Show Markup 
<div class="spectrum-Calendar">
   <div class="spectrum-Calendar-header">
      <div class="spectrum-Calendar-title" role="heading" aria-live="assertive" aria-atomic="true">August 2017</div>
      <button aria-label="Previous" title="Previous" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-prevMonth">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeftLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronLeftLarge" />
        </svg>
      </button>
      <button aria-label="Next" title="Next" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-nextMonth">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightLarge" />
        </svg>
      </button>
   </div>
   <div class="spectrum-Calendar-body" role="grid" tabindex="0" aria-readonly="true" aria-disabled="false">
     <table role="presentation" class="spectrum-Calendar-table">
        <thead role="presentation">
           <tr role="row">
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Sunday">Su</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Monday">Mo</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Tuesday">Tu</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Wednesday">We</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Thursday">Th</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Friday">Fr</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Saturday">Sa</abbr></th>
           </tr>
        </thead>
        <tbody role="presentation">
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, July 30, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">30</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, July 31, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">31</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 1, 2017"><span role="presentation" class="spectrum-Calendar-date">1</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Today, Wednesday, August 2, 2017 selected"><span role="presentation" class="spectrum-Calendar-date is-today">2</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 3, 2017"><span role="presentation" class="spectrum-Calendar-date">3</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 4, 2017"><span role="presentation" class="spectrum-Calendar-date">4</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="true" aria-invalid="false" title="Saturday, August 5, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected">5</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 6, 2017"><span role="presentation" class="spectrum-Calendar-date">6</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 7, 2017"><span role="presentation" class="spectrum-Calendar-date">7</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 8, 2017"><span role="presentation" class="spectrum-Calendar-date">8</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 9, 2017"><span role="presentation" class="spectrum-Calendar-date">9</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 10, 2017"><span role="presentation" class="spectrum-Calendar-date">10</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 11, 2017"><span role="presentation" class="spectrum-Calendar-date">11</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 12, 2017"><span role="presentation" class="spectrum-Calendar-date">12</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 13, 2017"><span role="presentation" class="spectrum-Calendar-date">13</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 14, 2017"><span role="presentation" class="spectrum-Calendar-date">14</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 15, 2017"><span role="presentation" class="spectrum-Calendar-date">15</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 16, 2017"><span role="presentation" class="spectrum-Calendar-date">16</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 17, 2017"><span role="presentation" class="spectrum-Calendar-date">17</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 18, 2017"><span role="presentation" class="spectrum-Calendar-date">18</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 19, 2017"><span role="presentation" class="spectrum-Calendar-date">19</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 20, 2017"><span role="presentation" class="spectrum-Calendar-date">20</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 21, 2017"><span role="presentation" class="spectrum-Calendar-date">21</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 22, 2017"><span role="presentation" class="spectrum-Calendar-date">22</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 23, 2017"><span role="presentation" class="spectrum-Calendar-date">23</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 24, 2017"><span role="presentation" class="spectrum-Calendar-date">24</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 25, 2017"><span role="presentation" class="spectrum-Calendar-date">25</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 26, 2017"><span role="presentation" class="spectrum-Calendar-date">26</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 27, 2017"><span role="presentation" class="spectrum-Calendar-date">27</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 28, 2017"><span role="presentation" class="spectrum-Calendar-date">28</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 29, 2017"><span role="presentation" class="spectrum-Calendar-date">29</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 30, 2017"><span role="presentation" class="spectrum-Calendar-date">30</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 31, 2017"><span role="presentation" class="spectrum-Calendar-date">31</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, September 1, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">1</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, September 2, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">2</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, September 3, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">3</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, September 4, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">4</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, September 5, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">5</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Wednesday, September 6, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">6</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, September 7, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">7</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, September 8, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">8</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, September 9, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">9</span></td>
           </tr>
        </tbody>
     </table>
   </div>
</div>

Calendar - Disabled
Precursor
CSS Unverified

The default Calendar element

August 2017
Show Markup 
<div class="spectrum-Calendar">
   <div class="spectrum-Calendar-header">
      <div class="spectrum-Calendar-title" role="heading" aria-live="assertive" aria-atomic="true">August 2017</div>
      <button aria-label="Previous" title="Previous" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-prevMonth" disabled>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeftLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronLeftLarge" />
        </svg>
      </button>
      <button aria-label="Next" title="Next" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-nextMonth" disabled>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightLarge" />
        </svg>
      </button>
   </div>
   <div class="spectrum-Calendar-body" role="grid" aria-readonly="true" aria-disabled="true">
     <table role="presentation" class="spectrum-Calendar-table">
        <thead role="presentation">
           <tr role="row">
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Sunday">Su</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Monday">Mo</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Tuesday">Tu</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Wednesday">We</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Thursday">Th</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Friday">Fr</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Saturday">Sa</abbr></th>
           </tr>
        </thead>
        <tbody role="presentation">
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, July 30, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">30</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, July 31, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">31</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, August 1, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">1</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="true" aria-invalid="false" title="Today, Wednesday, August 2, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">2</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, August 3, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">3</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, August 4, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">4</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, August 5, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">5</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, August 6, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">6</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, August 7, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">7</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, August 8, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">8</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Wednesday, August 9, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled is-today">9</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, August 10, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">10</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, August 11, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">11</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, August 12, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">12</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, August 13, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">13</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, August 14, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">14</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, August 15, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">15</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Wednesday, August 16, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">16</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, August 17, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">17</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, August 18, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">18</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, August 19, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">19</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, August 20, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">20</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, August 21, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">21</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, August 22, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">22</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Wednesday, August 23, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">23</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, August 24, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">24</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, August 25, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">25</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, August 26, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">26</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, August 27, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">27</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, August 28, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">28</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, August 29, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">29</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Wednesday, August 30, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">30</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, August 31, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">31</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, September 1, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">1</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, September 2, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">2</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, September 3, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">3</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, September 4, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">4</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, September 5, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">5</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Wednesday, September 6, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">6</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, September 7, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">7</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, September 8, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">8</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, September 9, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">9</span></td>
           </tr>
        </tbody>
     </table>
   </div>
</div>

Calendar - Focused
Precursor
CSS Unverified

The default Calendar element

August 2017
Show Markup 
<div class="spectrum-Calendar">
   <div class="spectrum-Calendar-header">
      <div class="spectrum-Calendar-title" role="heading" aria-live="assertive" aria-atomic="true">August 2017</div>
      <button aria-label="Previous" title="Previous" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-prevMonth">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeftLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronLeftLarge" />
        </svg>
      </button>
      <button aria-label="Next" title="Next" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-nextMonth">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightLarge" />
        </svg>
      </button>
   </div>
   <div class="spectrum-Calendar-body" role="grid" tabindex="0" aria-readonly="true" aria-disabled="false">
     <table role="presentation" class="spectrum-Calendar-table">
        <thead role="presentation">
           <tr role="row">
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Sunday">Su</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Monday">Mo</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Tuesday">Tu</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Wednesday">We</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Thursday">Th</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Friday">Fr</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Saturday">Sa</abbr></th>
           </tr>
        </thead>
        <tbody role="presentation">
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, July 30, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">30</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, July 31, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">31</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 1, 2017"><span role="presentation" class="spectrum-Calendar-date">1</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Today, Wednesday, August 2, 2017 selected"><span role="presentation" class="spectrum-Calendar-date is-today is-focused">2</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 3, 2017"><span role="presentation" class="spectrum-Calendar-date">3</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 4, 2017"><span role="presentation" class="spectrum-Calendar-date">4</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="true" aria-invalid="false" title="Saturday, August 5, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected is-focused">5</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 6, 2017"><span role="presentation" class="spectrum-Calendar-date">6</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 7, 2017"><span role="presentation" class="spectrum-Calendar-date is-focused">7</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 8, 2017"><span role="presentation" class="spectrum-Calendar-date">8</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 9, 2017"><span role="presentation" class="spectrum-Calendar-date">9</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 10, 2017"><span role="presentation" class="spectrum-Calendar-date">10</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 11, 2017"><span role="presentation" class="spectrum-Calendar-date">11</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 12, 2017"><span role="presentation" class="spectrum-Calendar-date">12</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 13, 2017"><span role="presentation" class="spectrum-Calendar-date">13</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 14, 2017"><span role="presentation" class="spectrum-Calendar-date">14</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 15, 2017"><span role="presentation" class="spectrum-Calendar-date">15</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 16, 2017"><span role="presentation" class="spectrum-Calendar-date">16</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 17, 2017"><span role="presentation" class="spectrum-Calendar-date">17</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 18, 2017"><span role="presentation" class="spectrum-Calendar-date">18</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 19, 2017"><span role="presentation" class="spectrum-Calendar-date">19</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 20, 2017"><span role="presentation" class="spectrum-Calendar-date">20</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 21, 2017"><span role="presentation" class="spectrum-Calendar-date">21</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 22, 2017"><span role="presentation" class="spectrum-Calendar-date">22</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 23, 2017"><span role="presentation" class="spectrum-Calendar-date">23</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 24, 2017"><span role="presentation" class="spectrum-Calendar-date">24</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 25, 2017"><span role="presentation" class="spectrum-Calendar-date">25</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 26, 2017"><span role="presentation" class="spectrum-Calendar-date">26</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 27, 2017"><span role="presentation" class="spectrum-Calendar-date">27</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 28, 2017"><span role="presentation" class="spectrum-Calendar-date">28</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 29, 2017"><span role="presentation" class="spectrum-Calendar-date">29</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 30, 2017"><span role="presentation" class="spectrum-Calendar-date">30</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 31, 2017"><span role="presentation" class="spectrum-Calendar-date">31</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, September 1, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">1</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, September 2, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">2</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, September 3, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">3</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, September 4, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">4</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, September 5, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">5</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Wednesday, September 6, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">6</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, September 7, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">7</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, September 8, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">8</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, September 9, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">9</span></td>
           </tr>
        </tbody>
     </table>
  </div>
</div>

Calendar - Range Selection
Precursor
CSS Unverified

The default Calendar element

A calendar with a range selected. .is-selection-start goes on the first day in the selection, and .is-range-start goes on the first day of each week or month in the middle of a selection (but not the first day of the selection). .is-selection-end goes on the last day of the selection, and .is-range-end goes on the last day of each week or month in the middle of the selection (but not on the last day of the selection).

August 2017
Show Markup 
<div class="spectrum-Calendar">
   <div class="spectrum-Calendar-header">
      <div class="spectrum-Calendar-title" role="heading" aria-live="assertive" aria-atomic="true">August 2017</div>
      <button aria-label="Previous" title="Previous" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-prevMonth">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeftLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronLeftLarge" />
        </svg>
      </button>
      <button aria-label="Next" title="Next" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-nextMonth">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightLarge" />
        </svg>
      </button>
   </div>
   <div class="spectrum-Calendar-body" role="grid" tabindex="0" aria-readonly="true" aria-disabled="false">
     <table role="presentation" class="spectrum-Calendar-table">
        <thead role="presentation">
           <tr role="row">
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Sunday">Su</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Monday">Mo</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Tuesday">Tu</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Wednesday">We</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Thursday">Th</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Friday">Fr</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Saturday">Sa</abbr></th>
           </tr>
        </thead>
        <tbody role="presentation">
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, July 30, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">30</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, July 31, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">31</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 1, 2017"><span role="presentation" class="spectrum-Calendar-date">1</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Today, Wednesday, August 2, 2017 selected"><span role="presentation" class="spectrum-Calendar-date">2</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 3, 2017"><span role="presentation" class="spectrum-Calendar-date">3</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 4, 2017"><span role="presentation" class="spectrum-Calendar-date">4</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 5, 2017"><span role="presentation" class="spectrum-Calendar-date">5</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 6, 2017"><span role="presentation" class="spectrum-Calendar-date">6</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 7, 2017"><span role="presentation" class="spectrum-Calendar-date">7</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 8, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected is-range-selection is-selection-start">8</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 9, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected is-range-selection">9</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="true" aria-invalid="false" title="Thursday, August 10, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected is-range-selection">10</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="true" aria-invalid="false" title="Friday, August 11, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected is-range-selection is-today">11</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="true" aria-invalid="false" title="Saturday, August 12, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected is-range-selection is-range-end">12</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="true" aria-invalid="false" title="Sunday, August 13, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected is-range-selection is-range-start">13</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="true" aria-invalid="false" title="Monday, August 14, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected is-range-selection is-selection-end">14</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 15, 2017"><span role="presentation" class="spectrum-Calendar-date">15</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 16, 2017"><span role="presentation" class="spectrum-Calendar-date">16</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 17, 2017"><span role="presentation" class="spectrum-Calendar-date">17</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 18, 2017"><span role="presentation" class="spectrum-Calendar-date">18</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 19, 2017"><span role="presentation" class="spectrum-Calendar-date">19</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 20, 2017"><span role="presentation" class="spectrum-Calendar-date">20</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 21, 2017"><span role="presentation" class="spectrum-Calendar-date">21</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 22, 2017"><span role="presentation" class="spectrum-Calendar-date">22</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 23, 2017"><span role="presentation" class="spectrum-Calendar-date">23</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 24, 2017"><span role="presentation" class="spectrum-Calendar-date">24</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 25, 2017"><span role="presentation" class="spectrum-Calendar-date">25</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 26, 2017"><span role="presentation" class="spectrum-Calendar-date">26</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 27, 2017"><span role="presentation" class="spectrum-Calendar-date">27</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 28, 2017"><span role="presentation" class="spectrum-Calendar-date">28</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 29, 2017"><span role="presentation" class="spectrum-Calendar-date">29</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 30, 2017"><span role="presentation" class="spectrum-Calendar-date">30</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 31, 2017"><span role="presentation" class="spectrum-Calendar-date">31</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, September 1, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">1</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, September 2, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">2</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, September 3, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">3</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, September 4, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">4</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, September 5, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">5</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Wednesday, September 6, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">6</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, September 7, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">7</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, September 8, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">8</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, September 9, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">9</span></td>
           </tr>
        </tbody>
     </table>
   </div>
</div>

Card
Precursor
CSS Unverified

The Default variant of Card

The standard Card component with cover photo and footer.

Card Title
jpg
Footer

Focused Card item within a grid

Card Title
jpg
Footer
Show Markup 
<div style="width: 208px;">
  <div class="spectrum-Card" tabindex="0" role="figure">
    <div class="spectrum-Card-coverPhoto" style="background-image: url(img/example-card-portrait.jpg)"></div>
    <div class="spectrum-Card-body">
      <div class="spectrum-Card-header">
        <div class="spectrum-Card-title">Card Title</div>
        <div class="spectrum-Card-actionButton">
          <button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--quiet">
            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-icon-18-More" />
            </svg>
          </button>
        </div>
      </div>
      <div class="spectrum-Card-content">
        <div class="spectrum-Card-subtitle">jpg</div>
      </div>
    </div>
    <div class="spectrum-Card-footer">
      Footer
    </div>
    <div class="spectrum-QuickActions spectrum-Card-quickActions">
      <div class="spectrum-Checkbox">
        <input type="checkbox" class="spectrum-Checkbox-input" aria-checked="false" title="Select" value="">
        <span class="spectrum-Checkbox-box">
          <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
          </svg>
          <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-DashSmall" />
          </svg>
        </span>
      </div>
    </div>
  </div>
</div>

<h2>Focused Card item within a grid</h3>
<div role="grid">
  <div style="width: 208px; outline: 0;" role="row">
    <div class="spectrum-Card is-focused" role="rowheader" tabindex="0">
      <div class="spectrum-Card-coverPhoto" style="background-image: url(img/example-card-portrait.jpg)"></div>
      <div class="spectrum-Card-body">
        <div class="spectrum-Card-header">
          <div class="spectrum-Card-title">Card Title</div>
          <div class="spectrum-Card-actionButton">
            <button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--quiet">
              <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-icon-18-More" />
              </svg>
            </button>
          </div>
        </div>
        <div class="spectrum-Card-content">
          <div class="spectrum-Card-subtitle">jpg</div>
        </div>
      </div>
      <div class="spectrum-Card-footer">
        Footer
      </div>
      <div class="spectrum-QuickActions spectrum-Card-quickActions">
        <div class="spectrum-Checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" tabindex="-1">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
            <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-DashSmall" />
            </svg>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

Card - Gallery
Beta Precursor
CSS Unverified

A spectrum gallery card for an image

Name
jpg
10/15/18
Show Markup 
<div style="width: 532px; height: 224px;">
  <div class="spectrum-Card spectrum-Card--gallery" tabindex="0" role="figure">
    <div class="spectrum-Card-preview">
      <div class="spectrum-Asset">
        <img class="spectrum-Asset-image" src="img/example-card-landscape.jpeg" />
      </div>
    </div>
    <div class="spectrum-Card-body">
      <div class="spectrum-Card-header">
        <div class="spectrum-Card-title">Name</div>
        <div class="spectrum-Card-subtitle">jpg</div>
        <div class="spectrum-Card-description">10/15/18</div>
        <div class="spectrum-Card-actionButton">
          <div style="display: inline-block;">
            <button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--quiet">
              <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-icon-18-More" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="spectrum-QuickActions spectrum-Card-quickActions">
      <div class="spectrum-Checkbox">
        <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
        <span class="spectrum-Checkbox-box">
          <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
          </svg>
          <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-DashSmall" />
          </svg>
        </span>
      </div>
    </div>
  </div>
</div>

Card - Quiet, File
Beta Precursor
CSS Unverified

A spectrum Quiet Card for a file asset

FileName
pdf
Show Markup 
<div style="width: 208px; height: 264px;">
  <div class="spectrum-Card spectrum-Card--quiet" tabindex="0" role="figure">
    <div class="spectrum-Card-preview">
      <div class="spectrum-Asset">
        <svg viewBox="0 0 128 128" class="spectrum-Asset-file">
          <path class="spectrum-Asset-fileBackground" d="M24,126c-5.5,0-10-4.5-10-10V12c0-5.5,4.5-10,10-10h61.5c2.1,0,4.1,0.8,5.6,2.3l20.5,20.4c1.5,1.5,2.4,3.5,2.4,5.7V116c0,5.5-4.5,10-10,10H24z"></path>
          <path class="spectrum-Asset-fileOutline" d="M113.1,23.3L92.6,2.9C90.7,1,88.2,0,85.5,0H24c-6.6,0-12,5.4-12,12v104c0,6.6,5.4,12,12,12h80c6.6,0,12-5.4,12-12V30.4C116,27.8,114.9,25.2,113.1,23.3z M90,6l20.1,20H92c-1.1,0-2-0.9-2-2V6z M112,116c0,4.4-3.6,8-8,8H24c-4.4,0-8-3.6-8-8V12c0-4.4,3.6-8,8-8h61.5c0.2,0,0.3,0,0.5,0v20c0,3.3,2.7,6,6,6h20c0,0.1,0,0.3,0,0.4V116z"></path>
        </svg>
      </div>
    </div>
    <div class="spectrum-Card-body">
      <div class="spectrum-Card-header">
        <div class="spectrum-Card-title">FileName</div>
      </div>
      <div class="spectrum-Card-content">
        <div class="spectrum-Card-subtitle">pdf</div>
      </div>
    </div>
    <div class="spectrum-QuickActions spectrum-Card-quickActions">
      <div class="spectrum-Checkbox">
        <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
          <span class="spectrum-Checkbox-box">
          <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
          </svg>
          <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-DashSmall" />
          </svg>
        </span>
      </div>
    </div>
  </div>
</div>

Card - Quiet, Folder
Beta Precursor
CSS Unverified

A spectrum Quiet Card for a folder asset

FolderName
folder
Show Markup 
<div style="width: 208px; height: 264px;">
  <div class="spectrum-Card spectrum-Card--quiet" tabindex="0" role="figure">
    <div class="spectrum-Card-preview">
      <div class="spectrum-Asset">
        <svg viewBox="0 0 32 32" class="spectrum-Asset-folder">
          <path class="spectrum-Asset-folderBackground" d="M3,29.5c-1.4,0-2.5-1.1-2.5-2.5V5c0-1.4,1.1-2.5,2.5-2.5h10.1c0.5,0,1,0.2,1.4,0.6l3.1,3.1c0.2,0.2,0.4,0.3,0.7,0.3H29c1.4,0,2.5,1.1,2.5,2.5v18c0,1.4-1.1,2.5-2.5,2.5H3z"></path>
          <path class="spectrum-Asset-folderOutline" d="M29,6H18.3c-0.1,0-0.2,0-0.4-0.2l-3.1-3.1C14.4,2.3,13.8,2,13.1,2H3C1.3,2,0,3.3,0,5v22c0,1.6,1.3,3,3,3h26c1.7,0,3-1.4,3-3V9C32,7.3,30.7,6,29,6z M31,27c0,1.1-0.9,2-2,2H3c-1.1,0-2-0.9-2-2V7h28c1.1,0,2,0.9,2,2V27z"></path>
        </svg>
      </div>
    </div>
    <div class="spectrum-Card-body">
      <div class="spectrum-Card-header">
        <div class="spectrum-Card-title">FolderName</div>
      </div>
      <div class="spectrum-Card-content">
        <div class="spectrum-Card-subtitle">folder</div>
      </div>
    </div>
    <div class="spectrum-QuickActions spectrum-Card-quickActions">
      <div class="spectrum-Checkbox">
        <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
        <span class="spectrum-Checkbox-box">
          <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
          </svg>
          <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-DashSmall" />
          </svg>
        </span>
      </div>
    </div>
  </div>
</div>

Card - Quiet, Large Image
Beta Precursor
CSS Unverified

A spectrum Quiet Card for an image

Name
jpg
10/15/18
Show Markup 
<div style="width: 208px; height: 264px;">
  <div class="spectrum-Card spectrum-Card--quiet" tabindex="0" role="figure">
    <div class="spectrum-Card-preview">
      <div class="spectrum-Asset">
        <img class="spectrum-Asset-image" src="img/example-ava.jpg" style="max-width: 75%; max-height: 75%; object-fit: contain;">
      </div>
    </div>
    <div class="spectrum-Card-body">
      <div class="spectrum-Card-header">
        <div class="spectrum-Card-title">Name</div>
        <div class="spectrum-Card-actionButton">
          <div style="display: inline-block;">
            <button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--quiet">
              <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-icon-18-More" />
              </svg>
            </button>
          </div>
        </div>
      </div>
      <div class="spectrum-Card-content">
        <div class="spectrum-Card-subtitle">jpg</div>
        <div class="spectrum-Card-description">10/15/18</div>
      </div>
    </div>
    <div class="spectrum-QuickActions spectrum-Card-quickActions">
      <div class="spectrum-Checkbox">
        <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
        <span class="spectrum-Checkbox-box">
          <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
          </svg>
          <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-DashSmall" />
          </svg>
        </span>
      </div>
    </div>
  </div>
</div>

Card - Quiet, Small Image
Precursor
CSS Unverified

The Quiet small variant of Card

A spectrum Quiet Card for an image

Name
jpg

Focused Card item within a grid

Name
jpg
Show Markup 
<div style="width: 112px; height: 136px;">
  <div class="spectrum-Card spectrum-Card--quiet spectrum-Card--small" tabindex="0" role="figure">
    <div class="spectrum-Card-preview">
      <div class="spectrum-Asset">
        <img class="spectrum-Asset-image" src="img/example-ava.jpg" style="max-width: 75%; max-height: 75%; object-fit: contain;">
      </div>
    </div>
    <div class="spectrum-Card-body">
      <div class="spectrum-Card-header">
        <div class="spectrum-Card-title">Name</div>
      </div>
      <div class="spectrum-Card-content">
        <div class="spectrum-Card-subtitle">jpg</div>
      </div>
    </div>
    <div class="spectrum-QuickActions spectrum-Card-actions">
      <div style="display: inline-block;">
        <button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--quiet">
          <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-icon-18-More" />
          </svg>
        </button>
      </div>
    </div>
    <div class="spectrum-QuickActions spectrum-Card-quickActions">
      <div class="spectrum-Checkbox">
        <input type="checkbox" class="spectrum-Checkbox-input" aria-checked="false" title="Select" value="" tabindex="-1">
        <span class="spectrum-Checkbox-box">
          <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
          </svg>
          <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-DashSmall" />
          </svg>
        </span>
      </div>
    </div>
  </div>
</div>

<h2>Focused Card item within a grid</h3>
<div role="grid">
  <div style="width: 112px; height: 136px; outline: 0;" role="row">
    <div class="spectrum-Card spectrum-Card--quiet spectrum-Card--small is-focused" role="rowheader" tabindex="0">
      <div class="spectrum-Card-preview">
        <div class="spectrum-Asset">
          <img class="spectrum-Asset-image" src="img/example-ava.jpg" style="max-width: 75%; max-height: 75%; object-fit: contain;">
        </div>
      </div>
      <div class="spectrum-Card-body">
        <div class="spectrum-Card-header">
          <div class="spectrum-Card-title">Name</div>
        </div>
        <div class="spectrum-Card-content">
          <div class="spectrum-Card-subtitle">jpg</div>
        </div>
      </div>
      <div class="spectrum-QuickActions spectrum-Card-actions">
        <div style="display: inline-block;">
          <button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--quiet">
            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-icon-18-More" />
            </svg>
          </button>
        </div>
      </div>
      <div class="spectrum-QuickActions spectrum-Card-quickActions">
        <div class="spectrum-Checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" tabindex="-1">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
            <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-DashSmall" />
            </svg>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

Checkbox
Canon
CSS Verified

Standard

Show Markup 
<label class="spectrum-Checkbox">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox is-indeterminate">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<br>
<label class="spectrum-Checkbox">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox with an extrordinarily long label please don't do this but if you did it should truncate text when it gets longer than the container which contains the checkbox which has an unacceptably long label</span>
</label>

Disabled
Show Markup 
<label class="spectrum-Checkbox is-disabled">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-3" disabled>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox is-disabled">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-4" disabled checked>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox is-disabled is-indeterminate">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-5" disabled>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>

Error
Show Markup 
<label class="spectrum-Checkbox is-invalid">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox is-invalid">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox is-invalid is-indeterminate">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>

Checkbox - Quiet
Canon
CSS Verified

Standard

Show Markup 
<label class="spectrum-Checkbox spectrum-Checkbox--quiet">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox spectrum-Checkbox--quiet">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox spectrum-Checkbox--quiet is-indeterminate">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<br>
<label class="spectrum-Checkbox spectrum-Checkbox--quiet">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox with an extrordinarily long label please don't do this but if you did it should truncate text when it gets longer than the container which contains the checkbox which has an unacceptably long label</span>
</label>

Disabled
Show Markup 
<label class="spectrum-Checkbox spectrum-Checkbox--quiet is-disabled">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-3" disabled>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox spectrum-Checkbox--quiet is-disabled">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-4" disabled checked>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox spectrum-Checkbox--quiet is-disabled is-indeterminate">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-5" disabled>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>

Error
Show Markup 
<label class="spectrum-Checkbox spectrum-Checkbox--quiet is-invalid">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox spectrum-Checkbox--quiet is-invalid">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox spectrum-Checkbox--quiet is-invalid is-indeterminate">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>

Circle Loader
Canon
CSS Unverified

The medium variant of a Circle Loader. A circle loader shows the activity of a system operation.

Show Markup 
<div class="spectrum-CircleLoader">
  <div class="spectrum-CircleLoader-track"></div>
  <div class="spectrum-CircleLoader-fills">
    <div class="spectrum-CircleLoader-fillMask1">
      <div class="spectrum-CircleLoader-fillSubMask1">
        <div class="spectrum-CircleLoader-fill"></div>
      </div>
    </div>
    <div class="spectrum-CircleLoader-fillMask2">
      <div class="spectrum-CircleLoader-fillSubMask2">
        <div class="spectrum-CircleLoader-fill"></div>
      </div>
    </div>
  </div>
</div>
<input type="number" min="0" max="100" style="display: block;" onchange="changeLoader(this.previousElementSibling, this.value)"/>

Circle Loader - Indeterminate
Canon
CSS Unverified

An indeterminate Spectrum Loader of default type (round)

Show Markup 
<div class="spectrum-CircleLoader spectrum-CircleLoader--indeterminate">
  <div class="spectrum-CircleLoader-track"></div>
  <div class="spectrum-CircleLoader-fills">
    <div class="spectrum-CircleLoader-fillMask1">
      <div class="spectrum-CircleLoader-fillSubMask1">
        <div class="spectrum-CircleLoader-fill"></div>
      </div>
    </div>
    <div class="spectrum-CircleLoader-fillMask2">
      <div class="spectrum-CircleLoader-fillSubMask2">
        <div class="spectrum-CircleLoader-fill"></div>
      </div>
    </div>
  </div>
</div>

Circle Loader - Indeterminate - Over Background
Canon
CSS Unverified

An full-page indeterminate circle loader

Show Markup 
<div style="width: 200px; height: 200px; background-color: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;">
  <div class="spectrum-CircleLoader spectrum-CircleLoader--indeterminate spectrum-CircleLoader--overBackground">
    <div class="spectrum-CircleLoader-track"></div>
    <div class="spectrum-CircleLoader-fills">
      <div class="spectrum-CircleLoader-fillMask1">
        <div class="spectrum-CircleLoader-fillSubMask1">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
      <div class="spectrum-CircleLoader-fillMask2">
        <div class="spectrum-CircleLoader-fillSubMask2">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Circle Loader - Indeterminate Large
Canon
CSS Unverified

A large, indeterminate circle loader

Show Markup 
<div class="spectrum-CircleLoader spectrum-CircleLoader--indeterminate spectrum-CircleLoader--large">
  <div class="spectrum-CircleLoader-track"></div>
  <div class="spectrum-CircleLoader-fills">
    <div class="spectrum-CircleLoader-fillMask1">
      <div class="spectrum-CircleLoader-fillSubMask1">
        <div class="spectrum-CircleLoader-fill"></div>
      </div>
    </div>
    <div class="spectrum-CircleLoader-fillMask2">
      <div class="spectrum-CircleLoader-fillSubMask2">
        <div class="spectrum-CircleLoader-fill"></div>
      </div>
    </div>
  </div>
</div>

Circle Loader - Indeterminate Small
Canon
CSS Unverified

A small, indeterminate circle loader

Show Markup 
<div class="spectrum-CircleLoader spectrum-CircleLoader--indeterminate spectrum-CircleLoader--small">
  <div class="spectrum-CircleLoader-track"></div>
  <div class="spectrum-CircleLoader-fills">
    <div class="spectrum-CircleLoader-fillMask1">
      <div class="spectrum-CircleLoader-fillSubMask1">
        <div class="spectrum-CircleLoader-fill"></div>
      </div>
    </div>
    <div class="spectrum-CircleLoader-fillMask2">
      <div class="spectrum-CircleLoader-fillSubMask2">
        <div class="spectrum-CircleLoader-fill"></div>
      </div>
    </div>
  </div>
</div>

Circle Loader - Large
Canon
CSS Unverified

Large variant of a circle loader. A circle loader shows the activity of a system operation.

Show Markup 
<div class="spectrum-CircleLoader spectrum-CircleLoader--large">
  <div class="spectrum-CircleLoader-track"></div>
  <div class="spectrum-CircleLoader-fills">
    <div class="spectrum-CircleLoader-fillMask1">
      <div class="spectrum-CircleLoader-fillSubMask1">
        <div class="spectrum-CircleLoader-fill"></div>
      </div>
    </div>
    <div class="spectrum-CircleLoader-fillMask2">
      <div class="spectrum-CircleLoader-fillSubMask2">
        <div class="spectrum-CircleLoader-fill"></div>
      </div>
    </div>
  </div>
</div>
<input type="number" min="0" max="100" style="display: block;" onchange="changeLoader(this.previousElementSibling, this.value)"/>

Circle Loader - Over Background
Canon
CSS Unverified

The medium, over color variant of a Circle Loader. A circle loader shows the activity of a system operation.

A Spectrum loader of default type (round) for using over a background color.

Show Markup 
<div style="width: 200px; height: 200px; background-color: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;">
  <div class="spectrum-CircleLoader spectrum-CircleLoader--overBackground">
    <div class="spectrum-CircleLoader-track"></div>
    <div class="spectrum-CircleLoader-fills">
      <div class="spectrum-CircleLoader-fillMask1">
        <div class="spectrum-CircleLoader-fillSubMask1">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
      <div class="spectrum-CircleLoader-fillMask2">
        <div class="spectrum-CircleLoader-fillSubMask2">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<input type="number" min="0" max="100" style="display: block;" onchange="changeLoader(this.previousElementSibling.firstElementChild, this.value)"/>

Circle Loader - Over Background - Large
Canon
CSS Unverified

The large, over color variant of a circle loader. A circle loader shows the activity of a system operation.

A Spectrum loader of default type (round) for using over a background color.

Show Markup 
<div style="width: 200px; height: 200px; background-color: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;">
  <div class="spectrum-CircleLoader spectrum-CircleLoader--large spectrum-CircleLoader--overBackground">
    <div class="spectrum-CircleLoader-track"></div>
    <div class="spectrum-CircleLoader-fills">
      <div class="spectrum-CircleLoader-fillMask1">
        <div class="spectrum-CircleLoader-fillSubMask1">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
      <div class="spectrum-CircleLoader-fillMask2">
        <div class="spectrum-CircleLoader-fillSubMask2">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<input type="number" min="0" max="100" style="display: block;" onchange="changeLoader(this.previousElementSibling.firstElementChild, this.value)"/>

Circle Loader - Over Background - Small
Canon
CSS Unverified

The small, over color variant of a circle loader. A circle loader shows the activity of a system operation.

A Spectrum loader of default type (round) for using over a background color.

Show Markup 
<div style="width: 200px; height: 200px; background-color: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;">
  <div class="spectrum-CircleLoader spectrum-CircleLoader--small spectrum-CircleLoader--overBackground">
    <div class="spectrum-CircleLoader-track"></div>
    <div class="spectrum-CircleLoader-fills">
      <div class="spectrum-CircleLoader-fillMask1">
        <div class="spectrum-CircleLoader-fillSubMask1">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
      <div class="spectrum-CircleLoader-fillMask2">
        <div class="spectrum-CircleLoader-fillSubMask2">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<input type="number" min="0" max="100" style="display: block;" onchange="changeLoader(this.previousElementSibling.firstElementChild, this.value)"/>

Circle Loader - Small
Canon
CSS Unverified

The small variant of a circle loader. A circle loader shows the activity of a system operation.

Show Markup 
<div class="spectrum-CircleLoader spectrum-CircleLoader--small">
  <div class="spectrum-CircleLoader-track"></div>
  <div class="spectrum-CircleLoader-fills">
    <div class="spectrum-CircleLoader-fillMask1">
      <div class="spectrum-CircleLoader-fillSubMask1">
        <div class="spectrum-CircleLoader-fill"></div>
      </div>
    </div>
    <div class="spectrum-CircleLoader-fillMask2">
      <div class="spectrum-CircleLoader-fillSubMask2">
        <div class="spectrum-CircleLoader-fill"></div>
      </div>
    </div>
  </div>
</div>
<input type="number" min="0" max="100" style="display: block;" onchange="changeLoader(this.previousElementSibling, this.value)"/>

Clear Button
Precursor
CSS Unverified

A button that clears things, medium sized

Used in search and tags.



Show Markup 
<button class="spectrum-ClearButton">
  <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CrossSmall" />
  </svg>
</button>
<button class="spectrum-ClearButton" disabled>
  <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CrossSmall" />
  </svg>
</button>

<br><br>

<button class="spectrum-ClearButton spectrum-ClearButton--small">
  <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CrossSmall" />
  </svg>
</button>
<button class="spectrum-ClearButton spectrum-ClearButton--small" disabled>
  <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CrossSmall" />
  </svg>
</button>

Coach Mark
Canon
CSS Unverified

Coach Mark Indicator

Coach mark with large indicator

Show Markup 
<div class="spectrum-CoachMarkIndicator" style="display: inline-block;">
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
</div>

<div class="spectrum-CoachMarkIndicator spectrum-CoachMarkIndicator--dark" style="display: inline-block;">
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
</div>

<div class="spectrum-CoachMarkIndicator spectrum-CoachMarkIndicator--light" style="display: inline-block;">
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
</div>

Quiet Coach Mark Indicator

Coach mark with small indicator

Show Markup 
<div class="spectrum-CoachMarkIndicator spectrum-CoachMarkIndicator--quiet" style="display: inline-block;">
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
</div>

<div class="spectrum-CoachMarkIndicator spectrum-CoachMarkIndicator--dark spectrum-CoachMarkIndicator--quiet" style="display: inline-block;">
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
</div>

<div class="spectrum-CoachMarkIndicator spectrum-CoachMarkIndicator--light spectrum-CoachMarkIndicator--quiet" style="display: inline-block;">
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
</div>

Coach Mark Dialog
Zoom in
Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
Zoom in
Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
Zoom in
2 of 8
Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
Zoom in
2 of 8
Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
Show Markup 
<div style="position: relative;">
  <div class="spectrum-CoachMarkIndicator spectrum-CoachMarkIndicator--quiet" style="position: absolute;">
    <div class="spectrum-CoachMarkIndicator-ring"></div>
    <div class="spectrum-CoachMarkIndicator-ring"></div>
    <div class="spectrum-CoachMarkIndicator-ring"></div>
  </div>

  <div class="spectrum-CoachMarkPopover" style="position: absolute; margin-left: 34px;">
    <div class="spectrum-CoachMarkPopover-header">
      <div class="spectrum-CoachMarkPopover-title">Zoom in</div>
    </div>
    <div class="spectrum-CoachMarkPopover-content">
      Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
    </div>
    <div class="spectrum-CoachMarkPopover-footer">
      <button class="spectrum-Button spectrum-Button--primary">
        <span>Okay</span>
      </button>
    </div>
  </div>
</div>

<div class="dummy-spacing" style="height: 250px"></div>

<div>
  <div class="spectrum-CoachMarkIndicator spectrum-CoachMarkIndicator--quiet">
    <div class="spectrum-CoachMarkIndicator-ring"></div>
    <div class="spectrum-CoachMarkIndicator-ring"></div>
    <div class="spectrum-CoachMarkIndicator-ring"></div>
  </div>

  <div class="spectrum-CoachMarkPopover">
    <div class="spectrum-CoachMarkPopover-header">
      <div class="spectrum-CoachMarkPopover-title">Zoom in</div>
    </div>
    <div class="spectrum-CoachMarkPopover-content">
      Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
    </div>
    <div class="spectrum-CoachMarkPopover-footer">
      <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--quiet">
        <span>Skip Tour</span>
      </button>
      <button class="spectrum-Button spectrum-Button--primary">
        <span>Next</span>
      </button>
    </div>
  </div>
</div>

<div class="dummy-spacing" style="height: 25px"></div>

<div>
  <div class="spectrum-CoachMarkIndicator">
    <div class="spectrum-CoachMarkIndicator-ring"></div>
    <div class="spectrum-CoachMarkIndicator-ring"></div>
    <div class="spectrum-CoachMarkIndicator-ring"></div>
  </div>

  <div class="spectrum-CoachMarkPopover">
    <div class="spectrum-CoachMarkPopover-header">
      <div class="spectrum-CoachMarkPopover-title">Zoom in</div>
      <div class="spectrum-CoachMarkPopover-step">2 of 8</div>
    </div>
    <div class="spectrum-CoachMarkPopover-content">
      Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
    </div>
    <div class="spectrum-CoachMarkPopover-footer">
      <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--quiet">
        <span>Skip Tour</span>
      </button>
      <button class="spectrum-Button spectrum-Button--primary">
        <span>Next</span>
      </button>
    </div>
  </div>
</div>

<div class="dummy-spacing" style="height: 25px"></div>

<div>
  <div class="spectrum-CoachMarkPopover">
    <img src="img/example-ava.jpg" class="spectrum-CoachMarkPopover-image" />

    <div class="spectrum-CoachMarkPopover-header">
      <div class="spectrum-CoachMarkPopover-title">Zoom in</div>
      <div class="spectrum-CoachMarkPopover-step">2 of 8</div>
    </div>
    <div class="spectrum-CoachMarkPopover-content">
      Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
    </div>
    <div class="spectrum-CoachMarkPopover-footer">
      <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--quiet">
        <span>Skip Tour</span>
      </button>
      <button class="spectrum-Button spectrum-Button--primary">
        <span>Next</span>
      </button>
    </div>
  </div>

  <div class="spectrum-CoachMarkIndicator">
    <div class="spectrum-CoachMarkIndicator-ring"></div>
    <div class="spectrum-CoachMarkIndicator-ring"></div>
    <div class="spectrum-CoachMarkIndicator-ring"></div>
  </div>
</div>

<div class="dummy-spacing" style="height: 25px"></div>

Combo Box
Canon
CSS Unverified

The default variant of Combobox

Default

Open

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Disabled

Invalid

Show Markup 
<h4>Default</h4>
<div class="spectrum-InputGroup">
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield spectrum-InputGroup-field">
  <button class="spectrum-FieldButton spectrum-InputGroup-button" aria-haspopup="true">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Open</h4>
<div class="spectrum-InputGroup is-open">
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield spectrum-InputGroup-field">
  <button class="spectrum-FieldButton spectrum-InputGroup-button is-selected" aria-haspopup="true">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <div class="spectrum-Popover spectrum-Popover--bottom is-open" style="position: absolute; top: 100%; left: 0; width: 100%">
    <ul class="spectrum-Menu" role="listbox">
      <li class="spectrum-Menu-item is-selected" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Ballard</span>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Fremont</span>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Greenwood</span>
      </li>
      <li class="spectrum-Menu-divider" role="separator"></li>
      <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
        <span class="spectrum-Menu-itemLabel">United States of America</span>
      </li>
    </ul>
  </div>
</div>

<div class="dummy-spacing"></div>

<h4>Disabled</h4>
<div class="spectrum-InputGroup is-disabled">
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield spectrum-InputGroup-field" disabled>
  <button class="spectrum-FieldButton spectrum-InputGroup-button" aria-haspopup="true" disabled>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Invalid</h4>
<div class="spectrum-InputGroup is-invalid">
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield spectrum-InputGroup-field is-invalid">
  <button class="spectrum-FieldButton spectrum-InputGroup-button is-invalid" aria-haspopup="true">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

Combo Box - Quiet
Canon
CSS Unverified

The quiet variant of Combobox

Default

Open

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Disabled

Invalid

Show Markup 
<h4>Default</h4>
<div class="spectrum-InputGroup spectrum-InputGroup--quiet">
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button" aria-haspopup="true">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Open</h4>
<div class="spectrum-InputGroup spectrum-InputGroup--quiet is-open">
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button is-selected" aria-haspopup="true">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <div class="spectrum-Popover spectrum-Popover--bottom is-open" style="position: absolute; top: 100%; width: 100%">
    <ul class="spectrum-Menu" role="listbox">
      <li class="spectrum-Menu-item is-selected" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Ballard</span>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Fremont</span>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Greenwood</span>
      </li>
      <li class="spectrum-Menu-divider" role="separator"></li>
      <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
        <span class="spectrum-Menu-itemLabel">United States of America</span>
      </li>
    </ul>
  </div>
</div>

<div class="dummy-spacing"></div>

<h4>Disabled</h4>
<div class="spectrum-InputGroup spectrum-InputGroup--quiet is-disabled">
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field" disabled>
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button" aria-haspopup="true" disabled>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Invalid</h4>
<div class="spectrum-InputGroup spectrum-InputGroup--quiet is-invalid">
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field is-invalid">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button is-invalid" aria-haspopup="true">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

Cycle Button
Beta Precursor
CSS Unverified
Show Markup 
<button class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-CycleButton">
  <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-CycleButton-item is-selected" focusable="false" aria-hidden="true" aria-label="Play">
    <use xlink:href="#spectrum-icon-18-PlayCircle" />
  </svg>
  <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-CycleButton-item" focusable="false" aria-hidden="true" aria-label="Pause">
    <use xlink:href="#spectrum-icon-18-PauseCircle" />
  </svg>
</button>

Date Picker
Beta Precursor
CSS Unverified

A date picker uses the input group component to display a field with a button next to it

Show Markup 
<div aria-disabled="false" aria-invalid="false" class="spectrum-InputGroup spectrum-Datepicker" aria-readonly="false" aria-required="false" aria-haspopup="true">
  <input type="text" class="spectrum-Textfield spectrum-InputGroup-field" aria-invalid="false" placeholder="Choose a date" value="">
    <button type="button" class="spectrum-FieldButton spectrum-InputGroup-button">
      <svg viewBox="0 0 36 36" focusable="false" aria-hidden="true" role="img" class="spectrum-Icon spectrum-Icon--sizeS">
        <path d="M33 6h-5V3a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3H10V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v3H1a1 1 0 0 0-1 1v26a1 1 0 0 0 1 1h32a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zm-1 26H2V8h4v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h14v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h4z">
        </path>
        <path d="M6 12h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 18h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 24h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4z">
        </path>
      </svg>
  </button>
</div>

Date Picker - Quiet
Beta Precursor
CSS Unverified

A date picker uses the input group component to display a field with a button next to it

Show Markup 
<div aria-disabled="false" aria-invalid="false" class="spectrum-InputGroup spectrum-InputGroup--quiet spectrum-Datepicker" aria-readonly="false" aria-required="false" aria-haspopup="true">
  <input type="text" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field" aria-invalid="false" placeholder="Choose a date" value="">
    <button type="button" class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button">
      <svg viewBox="0 0 36 36" focusable="false" aria-hidden="true" role="img" class="spectrum-Icon spectrum-Icon--sizeS">
        <path d="M33 6h-5V3a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3H10V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v3H1a1 1 0 0 0-1 1v26a1 1 0 0 0 1 1h32a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zm-1 26H2V8h4v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h14v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h4z">
        </path>
        <path d="M6 12h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 18h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 24h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4z">
        </path>
      </svg>
  </button>
</div>

Date Picker - Range
Beta Precursor
CSS Unverified

A date picker uses the input group component to display a field with a button next to it

Show Markup 
<div aria-invalid="false" class="spectrum-InputGroup spectrum-Datepicker spectrum-Datepicker--range" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <input type="text" class="spectrum-Textfield spectrum-InputGroup-field spectrum-Datepicker-startField" placeholder="mm/dd/yyyy" name="start" value="">
  <div class="spectrum-Datepicker--rangeDash"></div>
  <input type="text" class="spectrum-Textfield spectrum-InputGroup-field spectrum-Datepicker-endField" placeholder="mm/dd/yyyy" name="end" value="">
  <button type="button" class="spectrum-FieldButton" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <!-- To render focus ring around entire input group when one of the inputs has keyboard focus, we need this: -->
  <div class="spectrum-Datepicker-focusRing" role="presentation"></div>
</div>

<p/>

<div aria-invalid="true" class="spectrum-InputGroup spectrum-Datepicker spectrum-Datepicker--range is-invalid" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <input type="text" class="spectrum-Textfield spectrum-InputGroup-field spectrum-Datepicker-startField" aria-invalid="true" placeholder="mm/dd/yyyy" name="start" value="">
  <div class="spectrum-Datepicker--rangeDash"></div>
  <input type="text" class="spectrum-Textfield spectrum-InputGroup-field spectrum-Datepicker-endField is-invalid" aria-invalid="true" placeholder="mm/dd/yyyy" name="end" value="">
  <button type="button" class="spectrum-FieldButton is-invalid" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <!-- To render focus ring around entire input group when one of the inputs has keyboard focus, we need this: -->
  <div class="spectrum-Datepicker-focusRing" role="presentation"></div>
</div>

<p/>

<div aria-disabled="true" class="spectrum-InputGroup spectrum-Datepicker spectrum-Datepicker--range is-disabled" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <input type="text" class="spectrum-Textfield spectrum-InputGroup-field spectrum-Datepicker-startField" placeholder="mm/dd/yyyy" name="start" value="" disabled>
  <div class="spectrum-Datepicker--rangeDash"></div>
  <input type="text" class="spectrum-Textfield spectrum-InputGroup-field spectrum-Datepicker-endField" placeholder="mm/dd/yyyy" name="end" value="" disabled>
  <button type="button" class="spectrum-FieldButton" disabled tabindex="-1" aria-label="Calendar">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <!-- To render focus ring around entire input group when one of the inputs has keyboard focus, we need this: -->
  <div class="spectrum-Datepicker-focusRing" role="presentation"></div>
</div>

<p/>

<div class="spectrum-InputGroup spectrum-Datepicker spectrum-Datepicker--range spectrum-Datepicker--datetimeRange" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <input type="text" class="spectrum-Textfield spectrum-InputGroup-field spectrum-Datepicker-startField" placeholder="mm/dd/yyyy hh:mm a" name="start" value="">
  <div class="spectrum-Datepicker--rangeDash"></div>
  <input type="text" class="spectrum-Textfield spectrum-InputGroup-field spectrum-Datepicker-endField" placeholder="mm/dd/yyyy hh:mm a" name="end" value="">
  <button type="button" class="spectrum-FieldButton" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <!-- To render focus ring around entire input group when one of the inputs has keyboard focus, we need this: -->
  <div class="spectrum-Datepicker-focusRing" role="presentation"></div>
</div>

Date Picker - Range Quiet
Beta Precursor
CSS Unverified

A date picker uses the input group component to display a field with a button next to it

Show Markup 
<div class="spectrum-InputGroup spectrum-InputGroup--quiet spectrum-Datepicker spectrum-Datepicker--range" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <input type="text" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field spectrum-Datepicker-startField" placeholder="mm/dd/yyyy" name="start" value="2018-10-01">
  <div class="spectrum-Datepicker--rangeDash"></div>
  <input type="text" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field spectrum-Datepicker-startField" placeholder="mm/dd/yyyy" name="end" value="2018-10-30">
  <button type="button" class="spectrum-FieldButton spectrum-FieldButton--quiet" tabindex="-1" aria-label="Calendar">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <!-- To render focus ring around entire input group when one of the inputs has keyboard focus, we need this: -->
  <div class="spectrum-Datepicker-focusRing" role="presentation"></div>
</div>

<p />

<div aria-invalid="true" class="spectrum-InputGroup spectrum-InputGroup--quiet spectrum-Datepicker spectrum-Datepicker--range is-invalid" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <input type="text" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field spectrum-Datepicker-startField" aria-invalid="true" placeholder="mm/dd/yyyy" name="start" value="2018-10-01">
  <div class="spectrum-Datepicker--rangeDash"></div>
  <input type="text" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field spectrum-Datepicker-endField is-invalid" aria-invalid="true" placeholder="mm/dd/yyyy" name="end" value="2018-10-30">
  <button type="button" class="spectrum-FieldButton spectrum-FieldButton--quiet is-invalid" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <!-- To render focus ring around entire input group when one of the inputs has keyboard focus, we need this: -->
  <div class="spectrum-Datepicker-focusRing" role="presentation"></div>
</div>

<p />

<div aria-disabled="true" class="spectrum-InputGroup spectrum-InputGroup--quiet spectrum-Datepicker spectrum-Datepicker--range is-disabled" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <input type="text" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field spectrum-Datepicker-startField" placeholder="mm/dd/yyyy" name="start" value="2018-10-01" disabled>
  <div class="spectrum-Datepicker--rangeDash"></div>
  <input type="text" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field spectrum-Datepicker-endField" placeholder="mm/dd/yyyy" name="end" value="2018-10-30" disabled>
  <button type="button" class="spectrum-FieldButton spectrum-FieldButton--quiet" tabindex="-1" disabled aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <!-- To render focus ring around entire input group when one of the inputs has keyboard focus, we need this: -->
  <div class="spectrum-Datepicker-focusRing" role="presentation"></div>
</div>
<p/>

<div class="spectrum-InputGroup spectrum-InputGroup--quiet spectrum-Datepicker spectrum-Datepicker--range  spectrum-Datepicker--datetimeRange" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <input type="text" class="spectrum-Textfield  spectrum-Textfield--quiet spectrum-InputGroup-field spectrum-Datepicker-startField" aria-invalid="false" placeholder="mm/dd/yyyy hh:mm a" name="start" value="">
  <div class="spectrum-Datepicker--rangeDash"></div>
  <input type="text" class="spectrum-Textfield spectrum-Textfield--quiet  spectrum-InputGroup-field spectrum-Datepicker-endField" aria-invalid="false" placeholder="mm/dd/yyyy hh:mm a" name="end" value="">
  <button type="button" class="spectrum-FieldButton spectrum-FieldButton--quiet" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <!-- To render focus ring around entire input group when one of the inputs has keyboard focus, we need this: -->
  <div class="spectrum-Datepicker-focusRing" role="presentation"></div>
</div>

Dial
Precursor
CSS Unverified

The Dial Element (Design Precursor). You can dial values with it, sort of like a round slider

A dial for turning it up to 11.



Show Markup 
<div class="spectrum-Dial">
  <div class="spectrum-Dial-controls">
    <div class="spectrum-Dial-handle" tabindex="0">
      <input type="range" class="spectrum-Dial-input" min="0" max="100" value="0">
    </div>
  </div>
</div>
<div class="spectrum-Dial is-disabled">
  <div class="spectrum-Dial-controls">
    <div class="spectrum-Dial-handle" tabindex="0">
      <input type="range" class="spectrum-Dial-input" min="0" max="100" value="0">
    </div>
  </div>
</div>

<br><br>

<div class="spectrum-Dial spectrum-Dial--small">
  <div class="spectrum-Dial-controls">
    <div class="spectrum-Dial-handle" tabindex="0">
      <input type="range" class="spectrum-Dial-input" min="0" max="100" value="0">
    </div>
  </div>
</div>
<div class="spectrum-Dial spectrum-Dial--small is-disabled">
  <div class="spectrum-Dial-controls">
    <div class="spectrum-Dial-handle" tabindex="0">
      <input type="range" class="spectrum-Dial-input" min="0" max="100" value="0">
    </div>
  </div>
</div>

Dial - With label
Beta Precursor
CSS Unverified

A dial for turning it up to 11, now with labels.



54
54
Show Markup 
<div class="spectrum-Dial">
  <div class="spectrum-Dial-labelContainer">
    <label id="dialLabel" class="spectrum-Dial-label" for="labeledDial">Label</label>
    <!--<div class="spectrum-Dial-value" role="textbox" aria-readonly="true" aria-labelledby="dialLabel">54</div>-->
  </div>
  <div class="spectrum-Dial-controls">
    <div class="spectrum-Dial-handle" tabindex="0">
      <input type="range" class="spectrum-Dial-input" id="labeledDial" min="0" max="100" value="0">
    </div>
  </div>
</div>
<div class="spectrum-Dial is-disabled">
  <div class="spectrum-Dial-labelContainer">
    <label id="dialLabel" class="spectrum-Dial-label" for="labeledDial">Label</label>
    <!--<div class="spectrum-Dial-value" role="textbox" aria-readonly="true" aria-labelledby="dialLabel">54</div>-->
  </div>
  <div class="spectrum-Dial-controls">
    <div class="spectrum-Dial-handle" tabindex="0">
      <input type="range" class="spectrum-Dial-input" id="labeledDial" min="0" max="100" value="0">
    </div>
  </div>
</div>

<br><br>

<div class="spectrum-Dial">
  <div class="spectrum-Dial-labelContainer">
    <label id="dialLabel" class="spectrum-Dial-label" for="labeledDial">Label</label>
    <div class="spectrum-Dial-value" role="textbox" aria-readonly="true" aria-labelledby="dialLabel">54</div>
  </div>
  <div class="spectrum-Dial-controls">
    <div class="spectrum-Dial-handle" tabindex="0">
      <input type="range" class="spectrum-Dial-input" id="labeledDial" min="0" max="100" value="0">
    </div>
  </div>
</div>

<div class="spectrum-Dial is-disabled">
  <div class="spectrum-Dial-labelContainer">
    <label id="dialLabel" class="spectrum-Dial-label" for="labeledDial">Label</label>
    <div class="spectrum-Dial-value" role="textbox" aria-readonly="true" aria-labelledby="dialLabel">54</div>
  </div>
  <div class="spectrum-Dial-controls">
    <div class="spectrum-Dial-handle" tabindex="0">
      <input type="range" class="spectrum-Dial-input" id="labeledDial" min="0" max="100" value="0">
    </div>
  </div>
</div>

Dialog

Dialog - Alert Confirmation
Canon
CSS Verified

An confirmation alert dialog has specific button styles that should be used.

Enable Smart Filters?

Smart filters are nondestructive and will preserve your original images.
Show Markup 
<button class="spectrum-Button spectrum-Button--overBackground cssdocs-Overlay-showButton" onclick="openDialog(this.nextElementSibling)">Open Configuration Dialog</button>

<!-- cssdocs-Dialog class is included for demo purposes only -->
<div class="spectrum-Dialog spectrum-Dialog--alert is-open cssdocs-Dialog">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Enable Smart Filters?</h2>
  </div>
  <div class="spectrum-Dialog-content">
    Smart filters are nondestructive and will preserve your original images.
  </div>
  <div class="spectrum-Dialog-footer">
    <button class="spectrum-Button spectrum-Button--secondary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Cancel</button>
    <button class="spectrum-Button spectrum-Button--cta" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Enable</button>
  </div>
</div>

Dialog - Alert Information
Canon
CSS Verified

An information alert dialog has specific button styles that should be used.

Connect to WiFi

Please connect to WiFi to sync your projects or go to Settings to change your preferences.
Show Markup 
<button class="spectrum-Button spectrum-Button--overBackground cssdocs-Overlay-showButton" onclick="openDialog(this.nextElementSibling)">Open Information Dialog</button>

<!-- cssdocs-Dialog class is included for demo purposes only -->
<div class="spectrum-Dialog spectrum-Dialog--alert is-open cssdocs-Dialog">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Connect to WiFi</h2>
  </div>
  <div class="spectrum-Dialog-content">
    Please connect to WiFi to sync your projects or go to Settings to change your preferences.
  </div>
  <div class="spectrum-Dialog-footer">
    <button class="spectrum-Button spectrum-Button--secondary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Cancel</button>
    <button class="spectrum-Button spectrum-Button--primary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Continue</button>
  </div>
</div>

Dialog - Alert Destructive
Canon
CSS Verified

An destructive alert dialog has specific button styles that should be used.

Delete 3 Documents

Are you sure you want to delete the 3 selected documents?
Show Markup 
<button class="spectrum-Button spectrum-Button--overBackground cssdocs-Overlay-showButton" onclick="openDialog(this.nextElementSibling)">Open Destructive Dialog</button>

<!-- cssdocs-Dialog class is included for demo purposes only -->
<div class="spectrum-Dialog spectrum-Dialog--alert is-open cssdocs-Dialog">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Delete 3 Documents</h2>
  </div>
  <div class="spectrum-Dialog-content">
    Are you sure you want to delete the 3 selected documents?
  </div>
  <div class="spectrum-Dialog-footer">
    <button class="spectrum-Button spectrum-Button--secondary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Cancel</button>
    <button class="spectrum-Button spectrum-Button--warning" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Delete</button>
  </div>
</div>

Dialog - Alert Error
Canon
CSS Verified

An error alert dialog has an error icon in the header.

Unable to Share

An error occurred while sharing your project. Please verify the email address and try again.
Show Markup 
<button class="spectrum-Button spectrum-Button--overBackground cssdocs-Overlay-showButton" onclick="openDialog(this.nextElementSibling)">Open Error Dialog</button>

<!-- cssdocs-Dialog class is included for demo purposes only -->
<div class="spectrum-Dialog spectrum-Dialog--error spectrum-Dialog--alert is-open cssdocs-Dialog">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Unable to Share</h2>
    <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Dialog-typeIcon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-AlertMedium" />
    </svg>
  </div>
  <div class="spectrum-Dialog-content">
    An error occurred while sharing your project. Please verify the email address and try again.
  </div>
  <div class="spectrum-Dialog-footer">
    <button class="spectrum-Button spectrum-Button--primary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">OK</button>
  </div>
</div>

Dialog - Alert 3 buttons
Canon
CSS Verified

An alert dialog can have up to 3 buttons.

Rate This App

If you enjoy our app, would you mind taking a moment to rate it?
Show Markup 
<button class="spectrum-Button spectrum-Button--overBackground cssdocs-Overlay-showButton" onclick="openDialog(this.nextElementSibling)">Open 3 Button Dialog</button>

<!-- cssdocs-Dialog class is included for demo purposes only -->
<div class="spectrum-Dialog spectrum-Dialog--alert is-open cssdocs-Dialog">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Rate This App</h2>
  </div>
  <div class="spectrum-Dialog-content">
    If you enjoy our app, would you mind taking a moment to rate it?
  </div>
  <div class="spectrum-Dialog-footer">
    <button class="spectrum-Button spectrum-Button--secondary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">No, Thanks</button>
    <button class="spectrum-Button spectrum-Button--secondary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Remind Me Later</button>
    <button class="spectrum-Button spectrum-Button--primary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Rate Now</button>
  </div>
</div>

Dialog - Scrolling
Precursor
Unverified

A dialog without .spectrum-Dialog--alert can expand to a larger size to house larger contents.

EULA

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Show Markup 
<button class="spectrum-Button spectrum-Button--primary" onclick="openDialog(this.nextElementSibling)">Open Scrolling Dialog</button>

<div class="spectrum-Dialog">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">EULA</h2>
  </div>
  <div class="spectrum-Dialog-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
  </div>
  <div class="spectrum-Dialog-footer">
    <button class="spectrum-Button spectrum-Button--secondary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Decline</button>
    <button class="spectrum-Button spectrum-Button--primary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Accept</button>
  </div>
</div>

Dialog - Fullscreen
Precursor
Unverified

The fullscreen variant of Dialog

A fullscreen dialog will automatically fill almost all of the available screen space.

Default Dialog - Fullscreen

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Anything in the footer is sticky and aligned right.
Show Markup 
<button variant="primary" class="spectrum-Button spectrum-Button--primary" onclick="openDialog(this.nextElementSibling)">Open Fullscreen Dialog</button>

<div class="spectrum-Dialog spectrum-Dialog--fullscreen">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Default Dialog - Fullscreen</h2>
    <button class="spectrum-Button spectrum-Button--secondary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Cancel</button>
    <button class="spectrum-Button spectrum-Button--cta" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Save</button>
  </div>
  <div class="spectrum-Dialog-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
  </div>
  <div class="spectrum-Dialog-footer">
    Anything in the footer is sticky and aligned right.
  </div>
</div>

Dialog - Fullscreen Takeover
Precursor
Unverified

The fullscreen takeover variant of Dialog

A fullscreen takeover dialog will fill all of the available screen space.

Fullscreen Takeover

This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
Anything in the footer is sticky and aligned right.
Show Markup 
<button class="spectrum-Button spectrum-Button--primary" onclick="openDialog(this.nextElementSibling, false)">Open Fullscreen Takeover Dialog</button>

<div class="spectrum-Dialog spectrum-Dialog--fullscreenTakeover">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Fullscreen Takeover</h2>
    <button class="spectrum-Button spectrum-Button--secondary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Cancel</button>
    <button class="spectrum-Button spectrum-Button--cta" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Save</button>
  </div>
  <div class="spectrum-Dialog-content">
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
  </div>
  <div class="spectrum-Dialog-footer">
    Anything in the footer is sticky and aligned right.
  </div>
</div>

Drop Indicator
Precursor
CSS Unverified

The default variant for Dropindicator

A Drop Indicator is used to show the insertion position into a list or table.

Show Markup 
<div style="display: flex; align-items: center">
  <div class="spectrum-DropIndicator spectrum-DropIndicator--vertical" style="height: 300px; margin-right: 100px;"></div>
  <div class="spectrum-DropIndicator spectrum-DropIndicator--horizontal" style="width: 300px;"></div>
</div>

The default variant for the Dropdown element

Closed

Open

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

With Thumbnails

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Disabled

Closed

Open

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Disabled

Show Markup 
<h4>Closed</h4>
<div class="spectrum-Dropdown" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Dropdown-trigger" aria-haspopup="true">
    <span class="spectrum-Dropdown-label is-placeholder">Select a Country with a very long label, too long in fact</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Open</h4>
<div class="spectrum-Dropdown is-open" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Dropdown-trigger is-selected" aria-haspopup="true">
    <span class="spectrum-Dropdown-label">Ballard</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover is-open" style="width: 100%">
    <ul class="spectrum-Menu" role="listbox">
      <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Ballard</span>
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Fremont</span>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Greenwood</span>
      </li>
      <li class="spectrum-Menu-divider" role="separator"></li>
      <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
        <span class="spectrum-Menu-itemLabel">United States of America</span>
      </li>
    </ul>
  </div>
</div>

<div class="dummy-spacing"></div>

<h4>With Thumbnails</h4>
<div class="spectrum-Dropdown is-open" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Dropdown-trigger is-selected" aria-haspopup="true">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
    <span class="spectrum-Dropdown-label">Ballard</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover is-open" style="width: 100%">
    <ul class="spectrum-Menu" role="listbox">
      <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
          <use xlink:href="#spectrum-icon-18-Image" />
        </svg>
        <span class="spectrum-Menu-itemLabel">Ballard</span>
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
          <use xlink:href="#spectrum-icon-18-Image" />
        </svg>
        <span class="spectrum-Menu-itemLabel">Fremont</span>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
          <use xlink:href="#spectrum-icon-18-Image" />
        </svg>
        <span class="spectrum-Menu-itemLabel">Greenwood</span>
      </li>
      <li class="spectrum-Menu-divider" role="separator"></li>
      <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
          <use xlink:href="#spectrum-icon-18-Image" />
        </svg>
        <span class="spectrum-Menu-itemLabel">United States of America</span>
      </li>
    </ul>
  </div>
</div>

<div class="dummy-spacing"></div>

<h4>Disabled</h4>
<div class="spectrum-Dropdown is-disabled" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Dropdown-trigger" disabled aria-haspopup="true">
    <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Closed</h4>
<div class="spectrum-Dropdown is-invalid" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Dropdown-trigger is-invalid" aria-haspopup="true">
    <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Open</h4>
<div class="spectrum-Dropdown is-open is-invalid" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Dropdown-trigger is-invalid is-selected" aria-haspopup="true">
    <span class="spectrum-Dropdown-label">Ballard</span>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover is-open" style="width: 100%">
    <ul class="spectrum-Menu" role="listbox">
      <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Ballard</span>
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Fremont</span>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Greenwood</span>
      </li>
      <li class="spectrum-Menu-divider" role="separator"></li>
      <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
        <span class="spectrum-Menu-itemLabel">United States of America</span>
      </li>
    </ul>
  </div>
</div>

<div class="dummy-spacing"></div>

<h4>Disabled</h4>
<div class="spectrum-Dropdown is-invalid is-disabled" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Dropdown-trigger is-invalid" disabled aria-haspopup="true">
    <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

Dropdown - Quiet
Canon
CSS Verified

The quiet variant of Dropdown

Closed

Open

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

With Thumbnails

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Disabled

Closed

Open

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Disabled

Show Markup 
<h4>Closed</h4>
<div class="spectrum-Dropdown spectrum-Dropdown--quiet">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Dropdown-trigger" aria-haspopup="true">
    <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Open</h4>
<div class="spectrum-Dropdown spectrum-Dropdown--quiet is-open">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Dropdown-trigger is-selected" aria-haspopup="true">
    <span class="spectrum-Dropdown-label">Ballard</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover spectrum-Dropdown-popover--quiet is-open" style="display: block;">
  <ul class="spectrum-Menu" role="listbox">
    <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Ballard</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Fremont</span>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Greenwood</span>
    </li>
    <li class="spectrum-Menu-divider" role="separator"></li>
    <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
      <span class="spectrum-Menu-itemLabel">United States of America</span>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>

<h4>With Thumbnails</h4>
<div class="spectrum-Dropdown spectrum-Dropdown--quiet is-open">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Dropdown-trigger is-selected" aria-haspopup="true">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
    <span class="spectrum-Dropdown-label">Ballard</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover spectrum-Dropdown-popover--quiet is-open" style="display: block;">
  <ul class="spectrum-Menu" role="listbox">
    <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
        <use xlink:href="#spectrum-icon-18-Image" />
      </svg>
      <span class="spectrum-Menu-itemLabel">Ballard</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
        <use xlink:href="#spectrum-icon-18-Image" />
      </svg>
      <span class="spectrum-Menu-itemLabel">Fremont</span>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
        <use xlink:href="#spectrum-icon-18-Image" />
      </svg>
      <span class="spectrum-Menu-itemLabel">Greenwood</span>
    </li>
    <li class="spectrum-Menu-divider" role="separator"></li>
    <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
        <use xlink:href="#spectrum-icon-18-Image" />
      </svg>
      <span class="spectrum-Menu-itemLabel">United States of America</span>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>

<h4>Disabled</h4>
<div class="spectrum-Dropdown spectrum-Dropdown--quiet is-disabled">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Dropdown-trigger" disabled aria-haspopup="true">
    <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Closed</h4>
<div class="spectrum-Dropdown spectrum-Dropdown--quiet is-invalid">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet is-invalid spectrum-Dropdown-trigger" aria-haspopup="true">
    <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Open</h4>
<div class="spectrum-Dropdown spectrum-Dropdown--quiet is-open is-invalid">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet is-invalid spectrum-Dropdown-trigger" aria-haspopup="true">
    <span class="spectrum-Dropdown-label">Ballard</span>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover spectrum-Dropdown-popover--quiet is-open" style="display: block;">
  <ul class="spectrum-Menu" role="listbox">
    <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Ballard</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Fremont</span>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Greenwood</span>
    </li>
    <li class="spectrum-Menu-divider" role="separator"></li>
    <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
      <span class="spectrum-Menu-itemLabel">United States of America</span>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>

<h4>Disabled</h4>
<div class="spectrum-Dropdown spectrum-Dropdown--quiet is-invalid is-disabled">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet is-invalid spectrum-Dropdown-trigger" disabled aria-haspopup="true">
    <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

Dropzone
Precursor
CSS Unverified

A Drop Zone is an area on the screen into a which an object can be dragged and dropped to accomplish a task. For example, a Drop Zone might be used in an upload workflow to enable the user to simply drop a file from their operating system into the Drop Zone, which is a more efficient and intuitive action, rather than utilize the standard "Choose File" dialog.

Dropzone (default)

Drag and Drop Your File

Select a File from your computer
or Search Adobe Stock

Show Markup 
<div class="spectrum-Dropzone" role="region" tabindex="0" style="width: 300px;">
  <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
    <svg class="spectrum-IllustratedMessage-illustration" width="199" height="98" viewBox="0 0 199 97.7"><defs><style>.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:3px;}.cls-2{stroke-width:2px;}</style></defs><path class="cls-1" d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"/><line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5"/><path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43"/><path class="cls-1" d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"/><line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5"/><path class="cls-2" d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"/><path class="cls-2" d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"/><path class="cls-2" d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"/><path class="cls-1" d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"/><rect class="cls-1" x="1.5" y="34.5" width="58" height="39" rx="2" ry="2"/></svg>
    <h2 class="spectrum-Heading spectrum-Heading--pageTitle spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
    <p class="spectrum-Body--secondary spectrum-IllustratedMessage-description"><a href="#" class="spectrum-Link">Select a File</a> from your computer<br> or <a href="#" class="spectrum-Link">Search Adobe Stock</a></p>
  </div>
</div>

Dropzone (dragged)

Drag and Drop Your File

Select a File from your computer
or Search Adobe Stock

Show Markup 
<div class="spectrum-Dropzone is-dragged" role="region" tabindex="0" style="width: 300px;">
  <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
    <svg class="spectrum-IllustratedMessage-illustration" width="199" height="98" viewBox="0 0 199 97.7"><defs><style>.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:3px;}.cls-2{stroke-width:2px;}</style></defs><path class="cls-1" d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"/><line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5"/><path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43"/><path class="cls-1" d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"/><line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5"/><path class="cls-2" d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"/><path class="cls-2" d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"/><path class="cls-2" d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"/><path class="cls-1" d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"/><rect class="cls-1" x="1.5" y="34.5" width="58" height="39" rx="2" ry="2"/></svg>
    <h2 class="spectrum-Heading spectrum-Heading--pageTitle spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
    <p class="spectrum-Body--secondary spectrum-IllustratedMessage-description"><a href="#" class="spectrum-Link">Select a File</a> from your computer<br> or <a href="#" class="spectrum-Link">Search Adobe Stock</a></p>
  </div>
</div>

Field Group
Beta Precursor
CSS Unverified

A group of fields, usually Radios or Checkboxes.

Show Markup 
<div class="spectrum-FieldGroup">
  <div class="spectrum-Radio">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-0">
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
  </div>
  <div class="spectrum-Radio">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-1">
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-1">Dogs</label>
  </div>
</div>
<div class="spectrum-FieldGroup">
  <label class="spectrum-Checkbox">
    <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
    <span class="spectrum-Checkbox-box">
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
      </svg>
    </span>
    <span class="spectrum-Checkbox-label">Checkbox</span>
  </label>
  <label class="spectrum-Checkbox">
    <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
    <span class="spectrum-Checkbox-box">
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
      </svg>
    </span>
    <span class="spectrum-Checkbox-label">Checkbox</span>
  </label>
</div>

Field Group - Labels Below
Beta Precursor
CSS Unverified

Put the labels below by adding the modifier class to the field itself.

Show Markup 
<div class="spectrum-FieldGroup">
  <div class="spectrum-Radio spectrum-Radio--labelBelow">
    <input type="radio" name="rating" class="spectrum-Radio-input" id="radio-2">
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-2">1</label>
  </div>
  <div class="spectrum-Radio spectrum-Radio--labelBelow">
    <input type="radio" name="rating" class="spectrum-Radio-input" id="radio-3">
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-3">2</label>
  </div>
  <div class="spectrum-Radio spectrum-Radio--labelBelow">
    <input type="radio" name="rating" class="spectrum-Radio-input" id="radio-4">
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-4">3</label>
  </div>
</div>

Field Group - Vertical
Beta Precursor
CSS Unverified

A vertical group of fields.

Show Markup 
<div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
  <div class="spectrum-Radio">
    <input type="radio" name="animals" class="spectrum-Radio-input" id="radio-fieldgroup-vertical-1">
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-fieldgroup-vertical-1">Kittens</label>
  </div>
  <div class="spectrum-Radio">
    <input type="radio" name="animals" class="spectrum-Radio-input" id="radio-fieldgroup-vertical-2">
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-fieldgroup-vertical-2">Dogs</label>
  </div>
</div>

<div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
  <label class="spectrum-Checkbox">
    <input type="checkbox" class="spectrum-Checkbox-input">
    <span class="spectrum-Checkbox-box">
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
      </svg>
    </span>
    <span class="spectrum-Checkbox-label">Kibble</span>
  </label>
  <label class="spectrum-Checkbox">
    <input type="checkbox" class="spectrum-Checkbox-input" checked>
    <span class="spectrum-Checkbox-box">
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
      </svg>
    </span>
    <span class="spectrum-Checkbox-label">Bits</span>
  </label>
</div>

Field Label
Canon
CSS Unverified

Field label for use with form inputs.

Show Markup 
<label for="lifestory" class="spectrum-FieldLabel">Life Story</label>
<input id="lifestory" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield">

<label for="lifestory2" class="spectrum-FieldLabel is-disabled">Life Story</label>
<input id="lifestory2" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield" disabled>

Field Label - Left
Canon
CSS Unverified

A left aligned field label.

Show Markup 
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--left" style="width: 72px">Life Story</label>

<textarea id="lifestory" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield spectrum-Textfield--multiline"></textarea>

Field Label - Required
Canon
CSS Unverified

Field label for a required field.



Show Markup 
<label for="lifestory3" class="spectrum-FieldLabel">Life Story
  <svg class="spectrum-Icon spectrum-UIIcon-Asterisk spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Asterisk" />
  </svg>
</label>
<input id="lifestory3" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield">

<label for="lifestory4" class="spectrum-FieldLabel">Life Story (Required)</label>
<input id="lifestory4" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield">

<br/>
<br/>

<label for="lifestory5" class="spectrum-FieldLabel spectrum-FieldLabel--left">Life Story
  <svg class="spectrum-Icon spectrum-UIIcon-Asterisk spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Asterisk" />
  </svg>
</label>
<textarea id="lifestory5" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield spectrum-Textfield--multiline"></textarea>


<label for="lifestory6" class="spectrum-FieldLabel is-disabled">Life Story
  <svg class="spectrum-Icon spectrum-UIIcon-Asterisk spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Asterisk" />
  </svg>
</label>
<input id="lifestory6" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield" disabled>

Field Label - Right
Canon
CSS Unverified

A right aligned field label.

Show Markup 
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--right" style="width: 72px">Life Story</label>

<textarea id="lifestory" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield spectrum-Textfield--multiline"></textarea>

Form
Beta Precursor
CSS Unverified

Spectrum Form with Table layout

Show Markup 
<form class="spectrum-Form">
  <div class="spectrum-Form-item">
    <label for="fieldLabelExample-lifestory" class="spectrum-Form-itemLabel spectrum-FieldLabel--left">Company Title</label>
    <div class="spectrum-Form-itemField">
      <textarea id="fieldLabelExample-lifestory" placeholder="Enter your life story" name="field" class="spectrum-Textfield spectrum-Textfield--multiline"></textarea>
    </div>
  </div>
  <div class="spectrum-Form-item">
    <label class="spectrum-Form-itemLabel spectrum-FieldLabel--left" for="fieldLabelExample-emailaddress">Email Address</label>
    <div class="spectrum-Form-itemField">
      <input class="spectrum-Textfield" aria-invalid="false" type="text" placeholder="Enter your e-mail address" id="fieldLabelExample-emailaddress">
    </div>
  </div>
  <div class="spectrum-Form-item">
    <label class="spectrum-Form-itemLabel spectrum-FieldLabel--left" for="spectrum-textinput-instance">Country</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-Dropdown" style="width: 195px;">
        <button class="spectrum-FieldButton spectrum-Dropdown-trigger" aria-haspopup="true">
          <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <div class="spectrum-Form-item">
    <label class="spectrum-Form-itemLabel spectrum-FieldLabel--left" for="spectrum-textinput-instance">Interests</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
        <div class="spectrum-Radio">
          <input type="radio" name="animals" class="spectrum-Radio-input" id="radio-5">
          <span class="spectrum-Radio-button"></span>
          <label class="spectrum-Radio-label" for="radio-5">Kittens</label>
        </div>
        <div class="spectrum-Radio">
          <input type="radio" name="animals" class="spectrum-Radio-input" id="radio-6">
          <span class="spectrum-Radio-button"></span>
          <label class="spectrum-Radio-label" for="radio-6">Dogs</label>
        </div>
      </div>

      <div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
        <label class="spectrum-Checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
          <span class="spectrum-Checkbox-label">Checkbox</span>
        </label>
        <label class="spectrum-Checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
          <span class="spectrum-Checkbox-label">Checkbox</span>
        </label>
      </div>
    </div>
  </div>

  <div class="spectrum-Form-item">
    <label class="spectrum-Form-itemLabel spectrum-FieldLabel--left" for="fieldLabelExample-stepper">Age</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-Stepper">
        <input type="number" class="spectrum-Textfield spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5" id="fieldLabelExample-stepper">
        <span class="spectrum-Stepper-buttons">
          <button class="spectrum-ActionButton spectrum-Stepper-stepUp" tabindex="-1">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
            </svg>
          </button>
          <button class="spectrum-ActionButton spectrum-Stepper-stepDown" tabindex="-1">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
            </svg>
          </button>
        </span>
      </div>
    </div>
  </div>
</form>

IllustratedMessage
Beta Precursor
CSS Unverified

The IllustratedMessage component, used for status and errors.

Asset 1

Error 404: Page Not Found

This page isn't available. Try checking the URL or visit a different page.

Show Markup 
<div class="spectrum-IllustratedMessage">
  <svg class="spectrum-IllustratedMessage-illustration" xmlns="http://www.w3.org/2000/svg" width="200" height="98" viewBox="0 0 199 97.7"><defs><style>.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:3px;}.cls-2{stroke-width:2px;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="illustrations"><path class="cls-1" d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"/><line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5"/><path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43"/><path class="cls-1" d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"/><line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5"/><path class="cls-2" d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"/><path class="cls-2" d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"/><path class="cls-2" d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"/><path class="cls-1" d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"/><rect class="cls-1" x="1.5" y="34.5" width="58" height="39" rx="2" ry="2"/></g></g></svg>
  <h2 class="spectrum-Heading spectrum-Heading--pageTitle spectrum-IllustratedMessage-heading">Error 404: Page Not Found</h2>
  <p class="spectrum-Body--secondary spectrum-IllustratedMessage-description">This page isn't available. Try checking the URL or visit a different page.</p>
</div>

IllustratedMessage - CTA
Beta Precursor
CSS Unverified

The IllustratedMessage component, used for instruction/call to action.

Drag and Drop Your File

Select a File from your computer
or Search Adobe Stock

Show Markup 
<div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
  <svg class="spectrum-IllustratedMessage-illustration" width="199" height="98" viewBox="0 0 199 97.7"><defs><style>.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:3px;}.cls-2{stroke-width:2px;}</style></defs><path class="cls-1" d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"/><line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5"/><path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43"/><path class="cls-1" d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"/><line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5"/><path class="cls-2" d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"/><path class="cls-2" d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"/><path class="cls-2" d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"/><path class="cls-1" d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"/><rect class="cls-1" x="1.5" y="34.5" width="58" height="39" rx="2" ry="2"/></svg>
  <h2 class="spectrum-Heading spectrum-Heading--pageTitle spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
  <p class="spectrum-Body--secondary spectrum-IllustratedMessage-description"><a href="#" class="spectrum-Link">Select a File</a> from your computer<br> or <a href="#" class="spectrum-Link">Search Adobe Stock</a></p>
</div>

Label
Precursor
CSS Unverified

A label.

Grey Label Red Label Orange Label Yellow Label Seafoam Label Green Label Blue Label Fuchsia Label
Show Markup 
<span class="spectrum-Label spectrum-Label--grey">Grey Label</span>
<span class="spectrum-Label spectrum-Label--red">Red Label</span>
<span class="spectrum-Label spectrum-Label--orange">Orange Label</span>
<span class="spectrum-Label spectrum-Label--yellow">Yellow Label</span>
<span class="spectrum-Label spectrum-Label--seafoam">Seafoam Label</span>
<span class="spectrum-Label spectrum-Label--green">Green Label</span>
<span class="spectrum-Label spectrum-Label--blue">Blue Label</span>
<span class="spectrum-Label spectrum-Label--fuchsia">Fuchsia Label</span>

Label - Large
Precursor
CSS Unverified

A large label.

Grey Label Red Label Orange Label Yellow Label Seafoam Label Green Label Blue Label Fuchsia Label
Show Markup 
<span class="spectrum-Label spectrum-Label--large spectrum-Label--grey">Grey Label</span>
<span class="spectrum-Label spectrum-Label--large spectrum-Label--red">Red Label</span>
<span class="spectrum-Label spectrum-Label--large spectrum-Label--orange">Orange Label</span>
<span class="spectrum-Label spectrum-Label--large spectrum-Label--yellow">Yellow Label</span>
<span class="spectrum-Label spectrum-Label--large spectrum-Label--seafoam">Seafoam Label</span>
<span class="spectrum-Label spectrum-Label--large spectrum-Label--green">Green Label</span>
<span class="spectrum-Label spectrum-Label--large spectrum-Label--blue">Blue Label</span>
<span class="spectrum-Label spectrum-Label--large spectrum-Label--fuchsia">Fuchsia Label</span>

Label - Small
Precursor
CSS Unverified

A small label.

Grey Label Red Label Orange Label Yellow Label Seafoam Label Green Label Blue Label Fuchsia Label
Show Markup 
<span class="spectrum-Label spectrum-Label--small spectrum-Label--grey">Grey Label</span>
<span class="spectrum-Label spectrum-Label--small spectrum-Label--red">Red Label</span>
<span class="spectrum-Label spectrum-Label--small spectrum-Label--orange">Orange Label</span>
<span class="spectrum-Label spectrum-Label--small spectrum-Label--yellow">Yellow Label</span>
<span class="spectrum-Label spectrum-Label--small spectrum-Label--seafoam">Seafoam Label</span>
<span class="spectrum-Label spectrum-Label--small spectrum-Label--green">Green Label</span>
<span class="spectrum-Label spectrum-Label--small spectrum-Label--blue">Blue Label</span>
<span class="spectrum-Label spectrum-Label--small spectrum-Label--fuchsia">Fuchsia Label</span>

Label - Special
Precursor
CSS Unverified

A special label.

Active Inactive
Show Markup 
<span class="spectrum-Label spectrum-Label--active">Active</span>
<span class="spectrum-Label spectrum-Label--inactive">Inactive</span>

The default variant of link

Link using spectrum-Link 
<a href="#" class="spectrum-Link">Link using spectrum-Link</a>

The quiet variant of link

This uses spectrum-Link--quiet.

<p> This uses <a href="#" class="spectrum-Link spectrum-Link--quiet">spectrum-Link--quiet</a>.</p>

The variant of Link to use when the link is over a background

Hello, this is my spectrum-Link--overBackground. This is just filler text, but if you keep reading maybe something good will happen.

Show Markup 
<div style="background-color: rgb(15, 121, 125); padding: 15px 20px; display: inline-block;">
  <p class="spectrum-Body" style="color: rgb(255, 255, 255);">
    Hello, this is my <a href="#" class="spectrum-Link spectrum-Link--overBackground"> spectrum-Link--overBackground</a>. This is just filler text, but if you keep reading maybe something good will happen.
  </p>
</div>

This uses is-disabled.

<p>This uses <a class="spectrum-Link is-disabled">is-disabled</a>.</p>

This uses spectrum-Link--subtle.

<p> This uses <a href="#" class="spectrum-Link spectrum-Link--subtle">spectrum-Link--subtle</a>.</p>

Logic Button
Precursor
CSS Unverified

A button that toggles between and/or when clicked.

Logic Button (AND)

The AND variant of a Logic Button

Show Markup 
<button class="spectrum-LogicButton spectrum-LogicButton--and">And</button>
<button class="spectrum-LogicButton spectrum-LogicButton--and" disabled>And</button>

Logic Button (OR)

The OR variant of a Logic Button

Show Markup 
<button class="spectrum-LogicButton spectrum-LogicButton--or">Or</button>
<button class="spectrum-LogicButton spectrum-LogicButton--or" disabled>Or</button>

The default variant of the Select List element. Selectable list of options, typically used in flyouts

    • Financial District
    • South of Market
    • North Beach
    • City Center
    • Jack London Square
    • My best friend's mom's house in the burbs just off Silverado street
Show Markup 
<div style="display: flex; align-items: flex-start; justify-content: space-around;">

  <div class="spectrum-Popover is-open" style="position: relative">
    <ul class="spectrum-Menu" role="menu">
      <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Deselect</span>
      </li>
      <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Select Inverse</span>
      </li>
      <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Feather...</span>
      </li>
      <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Select and Mask...</span>
      </li>
      <li class="spectrum-Menu-divider" role="separator"></li>
      <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Save Selection</span>
      </li>
      <li class="spectrum-Menu-item is-disabled" role="menuitem" aria-disabled="true">
        <span class="spectrum-Menu-itemLabel">Make Work Path</span>
      </li>
    </ul>
  </div>

  <div class="spectrum-Popover is-open" style="position: relative">
    <ul class="spectrum-Menu" role="menu">
      <li role="presentation">
        <span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1"  aria-hidden="true">Section Heading</span>
        <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-category-1">
          <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
            <span class="spectrum-Menu-itemLabel">Action 1</span>
          </li>
          <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
            <span class="spectrum-Menu-itemLabel">Action 2</span>
          </li>
          <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
            <span class="spectrum-Menu-itemLabel">Action 3</span>
          </li>
        </ul>
      </li>
      <li class="spectrum-Menu-divider" role="separator"></li>
      <li role="presentation">
        <span class="spectrum-Menu-sectionHeading" id="menu-heading-category-2"  aria-hidden="true">Section Heading</span>
        <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-category-1" aria-disabled="true">
          <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="SaveFloppy">
              <use xlink:href="#spectrum-icon-18-SaveFloppy"></use>
            </svg>
            <span class="spectrum-Menu-itemLabel">Save</span>
          </li>
          <li class="spectrum-Menu-item is-disabled" role="menuitem" aria-disabled="true">
            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="DataDownload">
              <use xlink:href="#spectrum-icon-18-DataDownload"></use>
            </svg>
            <span class="spectrum-Menu-itemLabel">Download</span>
          </li>
        </ul>
      </li>
    </ul>
  </div>

  <div class="spectrum-Popover is-open" style="position: relative; width: 200px">
    <ul class="spectrum-Menu" role="listbox">
      <li role="presentation">
        <span class="spectrum-Menu-sectionHeading" id="menu-heading-sf" aria-hidden="true">San Francisco</span>
        <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-sf">
          <li class="spectrum-Menu-item" role="option" aria-selected="true" tabindex="0">
            <span class="spectrum-Menu-itemLabel">Financial District</span>
          </li>
          <li class="spectrum-Menu-item" role="option" tabindex="0">
            <span class="spectrum-Menu-itemLabel">South of Market</span>
          </li>
          <li class="spectrum-Menu-item" role="option" tabindex="0">
            <span class="spectrum-Menu-itemLabel">North Beach</span>
          </li>
        </ul>
      </li>
      <li class="spectrum-Menu-divider" role="separator"></li>
      <li role="presentation">
        <span class="spectrum-Menu-sectionHeading" id="menu-heading-oak" aria-hidden="true">Oakland</span>
        <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-oak">
          <li class="spectrum-Menu-item" role="option" tabindex="0">
            <span class="spectrum-Menu-itemLabel">City Center</span>
          </li>
          <li class="spectrum-Menu-item is-disabled" role="option">
            <span class="spectrum-Menu-itemLabel">Jack London Square</span>
          </li>
          <li class="spectrum-Menu-item is-selected" role="option" tabindex="0">
            <span class="spectrum-Menu-itemLabel">My best friend's mom's house in the burbs just off Silverado street</span>
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
            </svg>
          </li>
        </ul>
      </li>
    </ul>
  </div>

</div>

The default variant of the Select List element. Selectable list of options, typically used in flyouts

Show Markup 
<div style="position: relative; height: 260px;">

  <div class="spectrum-Popover is-open" style="top: 0; left: 0">
    <ul class="spectrum-Menu" role="menu">
      <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Deselect</span>
      </li>
      <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Select Inverse</span>
      </li>
      <li class="spectrum-Menu-item is-open" role="menuitem" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Feather...</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-Menu-chevron" focusable="false" aria-hidden="true" aria-label="Next">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Select and Mask...</span>
      </li>
      <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Save Selection</span>
      </li>
    </ul>
  </div>

  <div class="spectrum-Popover spectrum-Popover--right is-open" style="top: 64px; left: 115px">
    <ul class="spectrum-Menu" role="menu">
      <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Deselect</span>
      </li>
      <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Select and Mask...</span>
      </li>
    </ul>
  </div>

</div>

Miller Columns
Precursor
CSS Unverified

Miller Columns (Branches Selectable)

The default element for creating Miller Column views

Miller columns that allow both files and folders to be selected.

  • File 1
  • File 2
  • File 3
  • File 1
  • File 2
  • File 3
Show Markup 
<div class="spectrum-MillerColumns">
  <div class="spectrum-MillerColumns-item">
    <ul class="spectrum-AssetList">
      <li class="spectrum-AssetList-item is-branch is-selectable" tabindex="0">
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <span class="spectrum-AssetList-itemLabel">File 1</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-AssetList-item is-branch is-selectable is-selected" tabindex="0">
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <span class="spectrum-AssetList-itemLabel">File 2</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-AssetList-item is-branch is-selectable" tabindex="0">
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
        <span class="spectrum-AssetList-itemLabel">File 3</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
    </ul>
  </div>
  <div class="spectrum-MillerColumns-item">
    <ul class="spectrum-AssetList">
      <li class="spectrum-AssetList-item is-branch is-selectable" tabindex="0">
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <span class="spectrum-AssetList-itemLabel">File 1</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-AssetList-item is-selectable is-selected" tabindex="0">
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <span class="spectrum-AssetList-itemLabel">File 2</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-AssetList-item is-selectable is-selected" tabindex="0">
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
        <span class="spectrum-AssetList-itemLabel">File 3</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
    </ul>
  </div>
</div>

Miller Columns (Files Selectable)

The default element for creating Miller Column views

Miller columns that only allow files to be selected.

  • File 1
  • File 2
  • File 3
  • File 1
  • File 2
  • File 3
Show Markup 
<div class="spectrum-MillerColumns">
  <div class="spectrum-MillerColumns-item">
    <ul class="spectrum-AssetList">
      <li class="spectrum-AssetList-item is-branch" tabindex="0">
        <span class="spectrum-AssetList-itemLabel">File 1</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-AssetList-item" tabindex="0">
        <span class="spectrum-AssetList-itemLabel">File 2</span>
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-AssetList-item is-navigated is-branch" tabindex="0">
        <img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
        <span class="spectrum-AssetList-itemLabel">File 3</span></span>

        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
    </ul>
  </div>

  <div class="spectrum-MillerColumns-item">
    <ul class="spectrum-AssetList">
      <li class="spectrum-AssetList-item is-branch" tabindex="0">
        <span class="spectrum-AssetList-itemLabel">File 1</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-AssetList-item" tabindex="0">
        <span class="spectrum-AssetList-itemLabel">File 2</span>
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-AssetList-item is-selected" tabindex="0">
        <img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
        <span class="spectrum-AssetList-itemLabel">File 3</span>
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
    </ul>
  </div>
</div>

Page

The outer page container. A parent tag should only have the .spectrum class if using a standalone CSS file. If using multistops, a parent tag should have both the .spectrum class and the corresponding colorstop variant class, i.e. .spectrum--light. Finally, if scaling to large with the diff strategy, a parent tag should have the .spectrum--large class.

Text here!


Text here!








Show Markup 
Text here!<br>
<br><br>
<div class="spectrum--large spectrum">
  Text here!<br>
</div>
<br><br>

<button class="spectrum-Button spectrum-Button--cta">Button</button>
<br><br>
<div class="spectrum--large">
  <button class="spectrum-Button spectrum-Button--cta">Button</button>
</div>
<br><br>

<div class="spectrum-Dropdown" style="width: 220px;">
  <button class="spectrum-FieldButton spectrum-Dropdown-trigger" aria-haspopup="true">
    <span class="spectrum-Dropdown-label">Ballard</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>
<br><br>

<div class="spectrum--large">
  <div class="spectrum-Dropdown" style="width: 220px;">
    <button class="spectrum-FieldButton spectrum-Dropdown-trigger" aria-haspopup="true">
      <span class="spectrum-Dropdown-label">Ballard</span>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
      </svg>
    </button>
  </div>
</div>

Pagination - Button Style CTA
Beta Precursor
CSS Unverified

A Spectrum 'button style call-to-action' pagination

Show Markup 
<nav class="spectrum-SplitButton spectrum-SplitButton--left">
  <a href="#" class="spectrum-Button spectrum-Button--cta spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeftMedium" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-ChevronLeftMedium"></use>
    </svg>
  </a>
  <a href="#" class="spectrum-Button spectrum-Button--cta spectrum-SplitButton-action">
    <span class="spectrum-Button-label">Next</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium"></use>
    </svg>
  </a>
</nav>

Pagination - Button Style Primary
Beta Precursor
CSS Unverified

A Spectrum 'button style primary' pagination

Show Markup 
<nav class="spectrum-SplitButton spectrum-SplitButton--left">
  <a href="#" class="spectrum-Button spectrum-Button--primary spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeftMedium" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-ChevronLeftMedium"></use>
    </svg>
  </a>
  <a href="#" class="spectrum-Button spectrum-Button--primary spectrum-SplitButton-action">
    <span class="spectrum-Button-label">Next</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium"></use>
    </svg>
  </a>
</nav>

Pagination - Button Style Secondary
Beta Precursor
CSS Unverified

A Spectrum 'button style secondary' pagination

Show Markup 
<nav class="spectrum-SplitButton spectrum-SplitButton--left">
  <a href="#" class="spectrum-Button spectrum-Button--secondary spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeftMedium" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-ChevronLeftMedium"></use>
    </svg>
  </a>
  <a href="#" class="spectrum-Button spectrum-Button--secondary spectrum-SplitButton-action">
    <span class="spectrum-Button-label">Next</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium"></use>
    </svg>
  </a>
</nav>

Pagination - Explicit
Precursor
CSS Unverified

A Spectrum 'explicit' pagination

Show Markup 
<nav class="spectrum-Pagination spectrum-Pagination--explicit">
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Pagination-prevButton">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeftMedium" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-ChevronLeftMedium"></use>
    </svg>
  </a>
  <input type="text" name="field" value="2" class="spectrum-Textfield spectrum-Pagination-input">
  <span class="spectrum-Body--secondary spectrum-Pagination-counter">of 89 pages</span>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Pagination-nextButton">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium"></use>
    </svg>
  </a>
</nav>

Pagination - Page
Precursor
CSS Unverified

A Spectrum 'listing' pagination

Show Markup 
<nav class="spectrum-Pagination spectrum-Pagination--listing">
  <a href="#" class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet spectrum-Pagination-prevButton"><span class="spectrum-Button-label">Prev</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">1</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected"><span class="spectrum-ActionButton-label">2</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">3</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">4</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">5</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">6</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">...</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">24</span></a>
  <a href="#" class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet spectrum-Pagination-nextButton"><span class="spectrum-Button-label">Next</span></a>
</nav>

Popover
Canon
CSS Unverified

The default variant of Popover

  • Ballard
  • Fremont
  • Greenwood
  • United States of America
Show Markup 

<div class="spectrum-Popover is-open">
  <ul class="spectrum-Menu" role="listbox">
    <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Ballard</span>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Fremont</span>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Greenwood</span>
    </li>
    <li class="spectrum-Menu-divider" role="separator"></li>
    <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
      <span class="spectrum-Menu-itemLabel">United States of America</span>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>

Popover - Dialog style
Beta Precursor
CSS Unverified

Spectrum Popovers are implemented using the Dialog's inner elements.

Popover Title
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah


Very Very Very Very Long Popover Title
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah


Success Popover
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah


Very Long Error Message With Much Text
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah
Show Markup 
<div class="spectrum-Popover spectrum-Popover--dialog spectrum-Popover--bottom is-open" style="max-width:320px">
  <div class="spectrum-Dialog-header">
    <div class="spectrum-Dialog-title">Popover Title</div>
  </div>
  <div class="spectrum-Dialog-content">Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah</div>
  <div class="spectrum-Popover-tip"></div>
</div>

<div class="dummy-spacing" style="height: 215px"></div>

<br>
<br>

<div class="spectrum-Popover spectrum-Popover--dialog spectrum-Popover--right is-open" style="max-width:320px">
  <div class="spectrum-Dialog-header">
    <div class="spectrum-Dialog-title">Very Very Very Very Long Popover Title</div>
  </div>
  <div class="spectrum-Dialog-content">Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah</div>
  <div class="spectrum-Popover-tip"></div>
</div>

<div class="dummy-spacing" style="height: 215px"></div>

<br>
<br>

<div class="spectrum-Popover spectrum-Popover--dialog spectrum-Popover--top spectrum-Dialog--success is-open" style="max-width:320px">
  <div class="spectrum-Dialog-header">
    <div class="spectrum-Dialog-title">Success Popover</div>
    <div class="spectrum-Dialog-typeIcon"></div>
  </div>
  <div class="spectrum-Dialog-content">Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah</div>
  <div class="spectrum-Dialog-footer">
    <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--quiet">
      <span>Cancel</span>
    </button>
    <button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet">
      <span>Save</span>
    </button>
  </div>
  <div class="spectrum-Popover-tip"></div>
</div>

<div class="dummy-spacing" style="height: 290px"></div>

<br>
<br>

<div class="spectrum-Popover spectrum-Popover--dialog spectrum-Popover--right spectrum-Dialog--error is-open" style="max-width:320px">
  <div class="spectrum-Dialog-header">
    <div class="spectrum-Dialog-title">Very Long Error Message With Much Text</div>
    <div class="spectrum-Dialog-typeIcon"></div>
  </div>
  <div class="spectrum-Dialog-content">Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah</div>
  <div class="spectrum-Dialog-footer">
    <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--quiet">
      <span>Cancel</span>
    </button>
    <button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet">
      <span>Save</span>
    </button>
  </div>
  <div class="spectrum-Popover-tip"></div>
</div>

<div class="dummy-spacing" style="height: 290px"></div>

Quick Actions
Canon
CSS Verified

Quickactions element

Note that the .spectrum-QuickActions-overlay class should be placed on the container where the Quick Actions are displayed, and the .spectrum-QuickActions--textOnly class should be applied when the buttons have text only.

Show Markup 
<div class="spectrum-QuickActions-overlay" style="padding: 40px;">

  <div class="spectrum-QuickActions is-open">
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Copy">
        <use xlink:href="#spectrum-icon-18-Copy" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
  </div>

</div>

<div class="spectrum-QuickActions-overlay" style="padding: 40px;">

  <div class="spectrum-QuickActions spectrum-QuickActions--textOnly is-open">
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <span class="spectrum-ActionButton-label">Edit</span>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <span class="spectrum-ActionButton-label">Copy</span>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <span class="spectrum-ActionButton-label">Delete</span>
    </button>
  </div>

</div>

Radio
Canon
CSS Verified

Radio Button (Default)

The default variant for radio button

Show Markup 
<form>
  <div class="spectrum-Radio">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-0">
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
  </div>
  <div class="spectrum-Radio">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-1" checked>
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
  </div>
</form>
<form>
  <div class="spectrum-Radio">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-0-disabled" disabled>
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
  </div>
  <div class="spectrum-Radio">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-1-disabled" checked disabled>
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
  </div>
</form>
<form>
  <div class="spectrum-Radio is-invalid">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-0">
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
  </div>
  <div class="spectrum-Radio is-invalid">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-1" checked>
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
  </div>
</form>
<div class="spectrum-Radio">
  <input type="radio" name="longname" class="spectrum-Radio-input" id="radio-3">
  <span class="spectrum-Radio-button"></span>
  <label class="spectrum-Radio-label" for="radio-3">Radio with an extrordinarily long label please don't do this but if you did it should truncate text when it gets longer than the container which contains the radio which has an unacceptably long label</label>
</div>

Radio Button (Quiet)

The quiet variant for radio button

Show Markup 
<form>
  <div class="spectrum-Radio spectrum-Radio--quiet">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-0">
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
  </div>
  <div class="spectrum-Radio spectrum-Radio--quiet">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-1" checked>
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
  </div>
</form>
<form>
  <div class="spectrum-Radio spectrum-Radio--quiet">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-0-disabled" disabled>
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
  </div>
  <div class="spectrum-Radio spectrum-Radio--quiet">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-1-disabled" checked disabled>
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
  </div>
</form>
<form>
  <div class="spectrum-Radio spectrum-Radio--quiet is-invalid">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-0">
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
  </div>
  <div class="spectrum-Radio spectrum-Radio--quiet is-invalid">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-1" checked>
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
  </div>
</form>
<div class="spectrum-Radio spectrum-Radio--quiet">
  <input type="radio" name="longname-quiet" class="spectrum-Radio-input" id="radio-4">
  <span class="spectrum-Radio-button"></span>
  <label class="spectrum-Radio-label" for="radio-4">Radio with an extrordinarily long label please don't do this but if you did it should truncate text when it gets longer than the container which contains the radio which has an unacceptably long label</label>
</div>

Rating

Default
Canon
CSS Verified

A star rating component

Show Markup 
<div class="spectrum-Rating">
  <input class="spectrum-Rating-input" type="range" min="0" max="5" value="0" aria-label="Rating">

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>
</div>

Selected
Canon
CSS Verified
Show Markup 
<div class="spectrum-Rating">
  <input class="spectrum-Rating-input" type="range" min="0" max="5" value="0" aria-label="Rating">

  <span class="spectrum-Rating-icon is-selected">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon is-selected">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon is-selected is-currentValue">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>
</div>

readOnly
Canon
CSS Verified

The readOnly state of the Rating element.

Show Markup 
<div class="spectrum-Rating is-readOnly">
  <input class="spectrum-Rating-input" type="range" min="0" max="5" value="0" readOnly aria-label="Rating">

  <span class="spectrum-Rating-icon is-selected">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon is-selected">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon is-selected is-currentValue">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>
</div>

Quiet
Canon
CSS Verified

A quiet star rating component

Show Markup 
<div class="spectrum-Rating spectrum-Rating--quiet">
  <input class="spectrum-Rating-input" type="range" min="0" max="5" value="0" aria-label="Rating">

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>
</div>

Quiet Selected
Canon
CSS Verified
Show Markup 
<div class="spectrum-Rating spectrum-Rating--quiet">
  <input class="spectrum-Rating-input" type="range" min="0" max="5" value="0" aria-label="Rating">

  <span class="spectrum-Rating-icon is-selected">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon is-selected">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon is-selected is-currentValue">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>
</div>

Quiet readOnly
Canon
CSS Verified
Show Markup 
<div class="spectrum-Rating spectrum-Rating--quiet is-readOnly">
  <input class="spectrum-Rating-input" type="range" min="0" max="5" value="0" readOnly aria-label="Rating">

  <span class="spectrum-Rating-icon is-selected">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon is-selected">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon is-selected is-currentValue">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>
</div>

Disabled
Canon
CSS Verified
Show Markup 
<div class="spectrum-Rating is-disabled">
  <input class="spectrum-Rating-input" disabled type="range" min="0" max="5" value="0" aria-label="Rating">

  <span class="spectrum-Rating-icon is-selected">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon is-selected">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon is-selected is-currentValue">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>
</div>

Rule
Canon
CSS Verified

Rule (Large)

The large variant of Rule. A Rule separates information

Large

Page or Section Titles.

Show Markup 
<h2 class="spectrum-Heading--subtitle1">Large</h2>
<hr class="spectrum-Rule spectrum-Rule--large">
<p class="spectrum-Body">Page or Section Titles.</p>

Rule (Medium)

The medium variant of Rule. A Rule separates information

Medium

Divide subsections, or divide different groups of elements (between panels, rails, etc.)

Show Markup 
<h3 class="spectrum-Heading--subtitle2">Medium</h3>
<hr class="spectrum-Rule spectrum-Rule--medium">
<p class="spectrum-Body">Divide subsections, or divide different groups of elements (between panels, rails, etc.)</p>

Rule (Small)

A Rule separates information

Small

Divide like-elements (tables, tool groups, elements within a panel, etc.)

Show Markup 
<h4 class="spectrum-Heading--subtitle3">Small</h4>
<hr class="spectrum-Rule spectrum-Rule--small">
<p class="spectrum-Body">Divide like-elements (tables, tool groups, elements within a panel, etc.)</p>

The default variant of a search field

Show Markup 
<form class="spectrum-Search">
  <input type="search" placeholder="Search" name="search" value="" class="spectrum-Textfield spectrum-Search-input">
  <svg class="spectrum-Icon spectrum-UIIcon-Magnifier spectrum-Search-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Magnifier" />
  </svg>
  <button type="reset" class="spectrum-ClearButton">
    <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CrossSmall" />
    </svg>
  </button>
</form>

<form class="spectrum-Search">
  <input type="search" placeholder="Search" name="search" value="" class="spectrum-Textfield spectrum-Search-input" disabled>
  <svg class="spectrum-Icon spectrum-UIIcon-Magnifier spectrum-Search-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Magnifier" />
  </svg>
  <button type="reset" class="spectrum-ClearButton" disabled>
    <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CrossSmall" />
    </svg>
  </button>
</form>

Search - Quiet
Precursor
CSS Unverified

The quiet variant of the search element

The quiet searchy, cleary field.

Show Markup 
<form class="spectrum-Search">
  <input type="search" placeholder="Search" name="search" value="" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-Search-input">
  <svg class="spectrum-Icon spectrum-UIIcon-Magnifier spectrum-Search-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Magnifier" />
  </svg>
  <button type="reset" class="spectrum-ClearButton">
    <svg class="spectrum-Icon spectrum-UIIcon-CrossMedium focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CrossMedium" />
    </svg>
  </button>
</form>

<form class="spectrum-Search">
  <input type="search" placeholder="Search" name="search" value="" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-Search-input" disabled>
  <svg class="spectrum-Icon spectrum-UIIcon-Magnifier spectrum-Search-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Magnifier" />
  </svg>
  <button type="reset" class="spectrum-ClearButton" disabled>
    <svg class="spectrum-Icon spectrum-UIIcon-CrossMedium focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CrossMedium" />
    </svg>
  </button>
</form>

Search Within
Precursor
CSS Unverified

The default Search Within element

Override the width of the component where necessary.

Default

Open

  • All
  • Campaigns
  • Audiences
  • Tags

Default (Changed Selection)

Disabled

Show Markup 
<h4>Default</h4>
<form class="spectrum-SearchWithin">
  <div class="spectrum-Dropdown">
    <button type="button" class="spectrum-FieldButton spectrum-Dropdown-trigger" aria-haspopup="true">
      <span class="spectrum-Dropdown-label">All</span>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
      </svg>
    </button>
  </div>
  <input type="text" placeholder="Search" class="spectrum-Textfield">
  <button type="reset" class="spectrum-ClearButton">
    <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CrossSmall" />
    </svg>
  </button>
</form>

<h4>Open</h4>
<form class="spectrum-SearchWithin" style="margin-bottom: 180px;">
  <div class="spectrum-Dropdown is-open">
    <button type="button" class="spectrum-FieldButton spectrum-Dropdown-trigger is-selected" aria-haspopup="true">
      <span class="spectrum-Dropdown-label">All</span>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
      </svg>
    </button>
  </div>
  <input type="text" placeholder="Search" class="spectrum-Textfield">
  <button type="reset" class="spectrum-ClearButton">
    <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CrossSmall" />
    </svg>
  </button>

  <div class="spectrum-Popover is-open" style="position: absolute; top: 38px; left: 0;">
    <ul class="spectrum-Menu" role="listbox">
      <li class="spectrum-Menu-item is-selected" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">All</span>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Campaigns</span>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Audiences</span>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Tags</span>
      </li>
    </ul>
  </div>
</form>

<h4>Default (Changed Selection)</h4>
<form class="spectrum-SearchWithin">
  <div class="spectrum-Dropdown">
    <button type="button" class="spectrum-FieldButton spectrum-Dropdown-trigger" aria-haspopup="true">
      <span class="spectrum-Dropdown-label">Campaigns</span>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
      </svg>
    </button>
  </div>
  <input type="text" placeholder="Search" class="spectrum-Textfield">
  <button type="reset" class="spectrum-ClearButton">
    <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CrossSmall" />
    </svg>
  </button>
</form>

<h4>Disabled</h4>
<form class="spectrum-SearchWithin">
  <div class="spectrum-Dropdown is-disabled">
    <button type="button" class="spectrum-FieldButton spectrum-Dropdown-trigger" disabled aria-haspopup="true">
      <span class="spectrum-Dropdown-label">All</span>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
      </svg>
    </button>
  </div>
  <input type="text" placeholder="Search" class="spectrum-Textfield" value="Term" disabled>
  <button type="reset" class="spectrum-ClearButton" disabled>
    <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CrossSmall" />
    </svg>
  </button>
</form>

SideNav
Canon
CSS Verified

Side navigation provides access to information and features for a user

Show Markup 
<nav>
  <ul class="spectrum-SideNav">
    <li class="spectrum-SideNav-item is-selected">
      <a href="#" class="spectrum-SideNav-itemLink" aria-current="page">Section Title 1</a>
    </li>
    <li class="spectrum-SideNav-item is-disabled">
      <a class="spectrum-SideNav-itemLink">Section Title 2</a>
    </li>
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">Section Title 3</a>
    </li>
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">Section Title 4</a>
    </li>
  </ul>
</nav>

SideNav - Heading
Canon
CSS Verified

Side navigation provides access to information and features for a user

Show Markup 
<nav>
  <ul class="spectrum-SideNav">
    <li class="spectrum-SideNav-item is-selected">
      <!-- aria-current denotes current "page" or "location" -->
      <a href="#" class="spectrum-SideNav-itemLink" aria-current="page">Section 1</a>
    </li>
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">Section 2</a>
    </li>
    <li class="spectrum-SideNav-item">
      <h2 class="spectrum-SideNav-heading" id="nav-heading-category-1">Category 1</h2>
      <ul class="spectrum-SideNav" aria-labelledby="nav-heading-category-1">
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">Section 3</a>
        </li>
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">Section 4</a>
        </li>
      </ul>
    </li>
    <li class="spectrum-SideNav-item">
      <h2 class="spectrum-SideNav-heading" id="nav-heading-category-2">Category 2</h2>
      <ul class="spectrum-SideNav" aria-labelledby="nav-heading-category-2">
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">Section 5</a>
        </li>
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">Section 6</a>
        </li>
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">Section 7</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

SideNav - Icon
Canon
CSS Verified

Side navigation provides access to information and features for a user

Show Markup 
<nav>
  <ul class="spectrum-SideNav">
    <li class="spectrum-SideNav-item is-selected">
      <a href="#" class="spectrum-SideNav-itemLink" aria-current="page">
        <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-SideNav-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Star" />
        </svg>
        Section Title 1
      </a>
    </li>
    </li>
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">
        <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-SideNav-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Star" />
        </svg>
        Section Title 2
      </a>
    </li>
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">
        <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-SideNav-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Star" />
        </svg>
        Section Title 3
      </a>
    </li>
  </ul>
</nav>

SideNav - Multilevel
Canon
CSS Verified

Side navigation provides access to information and features for a user

Show Markup 
<nav>
  <ul class="spectrum-SideNav spectrum-SideNav--multiLevel">
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">Section Title 1</a>
    </li>
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">Section Title 2</a>
      <ul class="spectrum-SideNav">
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">Section  Title 1</a>
        </li>
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">Section  Title 2</a>
          <ul class="spectrum-SideNav">
            <li class="spectrum-SideNav-item">
              <a href="#" class="spectrum-SideNav-itemLink">Section Title 1</a>
            </li>
            <li class="spectrum-SideNav-item">
              <a href="#" class="spectrum-SideNav-itemLink">Section Title 2</a>
            </li>
          </ul>
        </li>
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">Section Title 3</a>
        </li>
      </ul>
    </li>
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">Section Title 4</a>
    </li>
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">Section Title 5</a>
    </li>
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">Section Title 6</a>
    </li>
  </ul>
</nav>

Slider
Canon
CSS Unverified

The default Slider. A slider is a tool for selecting a value within a range.

Show Markup 
<div class="spectrum-Slider">
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20">
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>
<div class="spectrum-Slider is-disabled">
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled>
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>

Slider - Color
Beta Precursor
CSS Unverified

Spectrum Color slider

#2680eb
#2680eb
#2680eb
Show Markup 
<div class="spectrum-Slider spectrum-Slider--color">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider--color-label-0" for="spectrum-Slider--color-input-0">Color</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider--color-label-0">#2680eb</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track" style="background: linear-gradient(to right, rgb(38, 128, 235), rgb(9, 90, 186))"></div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" aria-valuetext="#2680eb" step="2" min="10" max="20" id="spectrum-Slider--color-input-0">
    </div>
  </div>
</div>
<div class="spectrum-Slider spectrum-Slider--color">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider--color-label-1" for="spectrum-Slider--color-input-1">Color (showing alpha)</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider--color-label-1">#2680eb</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track" style="background: linear-gradient(to right, rgba(38, 128, 235, .5), rgb(9, 90, 186))"></div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" aria-valuetext="#2680eb" step="2" min="10" max="20" id="spectrum-Slider--color-input-1">
    </div>
  </div>
</div>
<div class="spectrum-Slider spectrum-Slider--color is-disabled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider--color-label-2" for="spectrum-Slider--color-input-2">Color</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider--color-label-2">#2680eb</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track" style="background: linear-gradient(to right, rgba(38, 128, 235, .5), rgb(9, 90, 186))"></div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" aria-valuetext="#2680eb" step="2" min="10" max="20" disabled id="spectrum-Slider--color-input-2">
    </div>
  </div>
</div>

Slider - Filled
Beta Precursor
CSS Unverified

With fill.

14
14
Show Markup 
<div class="spectrum-Slider spectrum-Slider--filled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-6" for="spectrum-Slider-input-6">Slider Label</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-6">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-6">
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>
<div class="spectrum-Slider is-disabled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-7" for="spectrum-Slider-input-7">Slider Label - Disabled</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-7">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled id="spectrum-Slider-input-7">
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>

Slider - Filled-Offset
Beta Precursor
CSS Unverified

With fill and offset.

14
14
14
Show Markup 
<div class="spectrum-Slider">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-18" for="spectrum-Slider-input-18">Slider Label</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-18">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track" style="width: 25%;"></div>
    <div class="spectrum-Slider-handle" style="left: 20%;">
      <input type="range" class="spectrum-Slider-input" value="14" min="10" max="20" id="spectrum-Slider-input-18">
    </div>
    <div class="spectrum-Slider-track" style="width: 50%;"></div>
    <div class="spectrum-Slider-fill" style="left: 20%; width: 30%"></div>
  </div>
</div>
<div class="spectrum-Slider">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-19" for="spectrum-Slider-input-19">Slider Label</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-19">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track" style="width: 25%;"></div>
    <div class="spectrum-Slider-handle" style="left: 70%;">
      <input type="range" class="spectrum-Slider-input" value="14" min="10" max="20" id="spectrum-Slider-input-19">
    </div>
    <div class="spectrum-Slider-track" style="width: 50%;"></div>
    <div class="spectrum-Slider-fill spectrum-Slider-fill--right" style="left: 50%; width: 20%"></div>
  </div>
</div>
<div class="spectrum-Slider is-disabled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-19" for="spectrum-Slider-input-19">Slider Label</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-19">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track" style="width: 25%;"></div>
    <div class="spectrum-Slider-handle" style="left: 70%;">
      <input type="range" class="spectrum-Slider-input" value="14" min="10" max="20" id="spectrum-Slider-input-19">
    </div>
    <div class="spectrum-Slider-track" style="width: 50%;"></div>
    <div class="spectrum-Slider-fill spectrum-Slider-fill--right" style="left: 50%; width: 20%"></div>
  </div>
</div>

Slider - Ramp
Precursor
CSS Unverified

The ramped variant of Slider

14
14
Show Markup 
<div class="spectrum-Slider spectrum-Slider--ramp">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-10" for="spectrum-Slider-input-10">Slider Label</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-10">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-ramp">
      <svg viewBox="0 0 240 16" preserveAspectRatio="none" aria-hidden="true" focusable="false">
        <path d="M240,4v8c0,2.3-1.9,4.1-4.2,4L1,9C0.4,9,0,8.5,0,8c0-0.5,0.4-1,1-1l234.8-7C238.1-0.1,240,1.7,240,4z"></path>
      </svg>
    </div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-10">
    </div>
  </div>
</div>
<div class="spectrum-Slider spectrum-Slider--ramp is-disabled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-11" for="spectrum-Slider-input-11">Slider Label - Disabled</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-11">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-ramp">
      <svg viewBox="0 0 240 16" preserveAspectRatio="none" aria-hidden="true" focusable="false">
        <path d="M240,4v8c0,2.3-1.9,4.1-4.2,4L1,9C0.4,9,0,8.5,0,8c0-0.5,0.4-1,1-1l234.8-7C238.1-0.1,240,1.7,240,4z"></path>
      </svg>
    </div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-11" disabled>
    </div>
  </div>
</div>

Slider - Range
Precursor
CSS Unverified

The Range variant of Slider

A range slider with two handles.

Show Markup 
<div class="spectrum-Slider spectrum-Slider--range" role="group" aria-labelledby="spectrum-Slider-label-4">
  <div class="spectrum-Slider-labelContainer" role="presentation">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-4" for="spectrum-Slider-input-4-0">Slider Label</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-4">14 - 48</div>
  </div>
  <div class="spectrum-Slider-controls" role="presentation">
    <div class="spectrum-Slider-track" style="width: 20%;"></div>
    <div class="spectrum-Slider-handle" style="left: 20%;" role="presentation">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" aria-label="min" id="spectrum-Slider-input-4-0" aria-labelledby="spectrum-Slider-label-4 spectrum-Slider-input-4-0">
    </div>
    <div class="spectrum-Slider-track" style="left: 20%; right: 40%;"></div>
    <div class="spectrum-Slider-handle" style="left: 60%;" role="presentation">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" aria-label="max" id="spectrum-Slider-input-4-1" aria-labelledby="spectrum-Slider-label-4 spectrum-Slider-input-4-1">
    </div>
    <div class="spectrum-Slider-track" style="width: 40%;"></div>
  </div>
</fieldset>
<div class="spectrum-Slider spectrum-Slider--range is-disabled" role="group" aria-labelledby="spectrum-Slider-label-5">
  <div class="spectrum-Slider-labelContainer" role="presentation">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-5" for="spectrum-Slider-input-5-0">Slider Label - Disabled</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-5">14 - 48</div>
  </div>
  <div class="spectrum-Slider-controls" role="presentation">
    <div class="spectrum-Slider-track" style="width: 20%;"></div>
    <div class="spectrum-Slider-handle" style="left: 20%;" role="presentation">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" aria-label="min" disabled id="spectrum-Slider-input-5-0" aria-labelledby="spectrum-Slider-label-5 spectrum-Slider-input-5-0">
    </div>
    <div class="spectrum-Slider-track" style="left: 20%; right: 40%;"></div>
    <div class="spectrum-Slider-handle" style="left: 60%;" role="presentation">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" aria-label="max" disabled id="spectrum-Slider-input-5-1" aria-labelledby="spectrum-Slider-label-5 spectrum-Slider-input-5-1">
    </div>
    <div class="spectrum-Slider-track" style="width: 40%;"></div>
  </div>
</div>

Slider - Tick
Precursor
CSS Unverified

The Tick variant of Slider

Spectrum tick slider

14
14
Show Markup 
<div class="spectrum-Slider spectrum-Slider--tick">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-14" for="spectrum-Slider-input-14">Slider Label</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-14">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-ticks">
      <div class="spectrum-Slider-tick"></div>
      <div class="spectrum-Slider-tick"></div>
      <div class="spectrum-Slider-tick"></div>
      <div class="spectrum-Slider-tick"></div>
      <div class="spectrum-Slider-tick"></div>
      <div class="spectrum-Slider-tick"></div>
    </div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-14">
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>
<div class="spectrum-Slider spectrum-Slider--tick is-disabled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-15" for="spectrum-Slider-input-15">Slider Label - Disabled</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-15">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-ticks">
      <div class="spectrum-Slider-tick"></div>
      <div class="spectrum-Slider-tick"></div>
      <div class="spectrum-Slider-tick"></div>
      <div class="spectrum-Slider-tick"></div>
      <div class="spectrum-Slider-tick"></div>
      <div class="spectrum-Slider-tick"></div>
    </div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled id="spectrum-Slider-input-15">
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>

Slider - Tick with Labels
Beta Precursor
CSS Unverified

Spectrum tick slider with labels

14
0
20
40
60
80
100
14
0
20
40
60
80
100
Show Markup 
<div class="spectrum-Slider">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-12" for="spectrum-Slider-input-12">Slider Label</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-12">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-ticks">
      <div class="spectrum-Slider-tick">
        <div class="spectrum-Slider-tickLabel">0</div>
      </div>
      <div class="spectrum-Slider-tick">
        <div class="spectrum-Slider-tickLabel">20</div>
      </div>
      <div class="spectrum-Slider-tick">
        <div class="spectrum-Slider-tickLabel">40</div>
      </div>
      <div class="spectrum-Slider-tick">
        <div class="spectrum-Slider-tickLabel">60</div>
      </div>
      <div class="spectrum-Slider-tick">
        <div class="spectrum-Slider-tickLabel">80</div>
      </div>
      <div class="spectrum-Slider-tick">
        <div class="spectrum-Slider-tickLabel">100</div>
      </div>
    </div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-12">
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>
<div class="spectrum-Slider is-disabled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-13" for="spectrum-Slider-input-13">Slider Label - Disabled</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-13">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-ticks">
      <div class="spectrum-Slider-tick">
        <div class="spectrum-Slider-tickLabel">0</div>
      </div>
      <div class="spectrum-Slider-tick">
        <div class="spectrum-Slider-tickLabel">20</div>
      </div>
      <div class="spectrum-Slider-tick">
        <div class="spectrum-Slider-tickLabel">40</div>
      </div>
      <div class="spectrum-Slider-tick">
        <div class="spectrum-Slider-tickLabel">60</div>
      </div>
      <div class="spectrum-Slider-tick">
        <div class="spectrum-Slider-tickLabel">80</div>
      </div>
      <div class="spectrum-Slider-tick">
        <div class="spectrum-Slider-tickLabel">100</div>
      </div>
    </div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled id="spectrum-Slider-input-13">
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>

Slider - Video Player
Precursor
CSS Unverified

The player variant of Slider

Displays a buffer for video players.

3:48
3:48
Show Markup 
<div class="spectrum-Slider">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-16" for="spectrum-Slider-input-16">My Video</label>
    <div class="spectrum-Slider-value">3:48</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-buffer" style="width: 20%;" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-labelledby="spectrum-Slider-label-16"></div>
    <div class="spectrum-Slider-handle" style="left: 20%;">
      <input type="range" class="spectrum-Slider-input" aria-valuetext="3:48" value="228" min="0" max="760" id="spectrum-Slider-input-16">
    </div>
    <div class="spectrum-Slider-buffer" style="left: 20%; width: 30%;"></div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>

<div class="spectrum-Slider is-disabled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-17" for="spectrum-Slider-input-17">My Video</label>
    <div class="spectrum-Slider-value">3:48</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-buffer" style="width: 20%;" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-labelledby="spectrum-Slider-label-16"></div>
    <div class="spectrum-Slider-handle" tabindex="0" style="left: 20%;">
      <input type="range" class="spectrum-Slider-input" aria-valuetext="3:48" value="228" min="0" max="760" disabled id="spectrum-Slider-input-17">
    </div>
    <div class="spectrum-Slider-buffer" style="left: 20%; right: 50%;"></div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>

Slider - With Label
Beta Precursor
CSS Unverified
14
14
Show Markup 
<div class="spectrum-Slider">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-8" for="spectrum-Slider-input-8">Slider Label</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-8">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-8">
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>
<div class="spectrum-Slider is-disabled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-9" for="spectrum-Slider-input-9">Slider Label - Disabled</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-9">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled id="spectrum-Slider-input-9">
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>

SplitButton - CTA
Precursor
CSS Unverified

A CTA split button.

Show Markup 
<div class="spectrum-SplitButton">
  <button class="spectrum-Button spectrum-Button--cta spectrum-SplitButton-action">Split Button</button>
  <button class="spectrum-Button spectrum-Button--cta spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<div class="spectrum-SplitButton spectrum-SplitButton--left">
  <button class="spectrum-Button spectrum-Button--cta spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <button class="spectrum-Button spectrum-Button--cta spectrum-SplitButton-action">Split Button</button>
</div>

SplitButton - Primary
Precursor
CSS Unverified

A primary split button.

Show Markup 
<div class="spectrum-SplitButton">
  <button class="spectrum-Button spectrum-Button--primary spectrum-SplitButton-action">Split Button</button>
  <button class="spectrum-Button spectrum-Button--primary spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<div class="spectrum-SplitButton spectrum-SplitButton--left">
  <button class="spectrum-Button spectrum-Button--primary spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <button class="spectrum-Button spectrum-Button--primary spectrum-SplitButton-action">Split Button</button>
</div>

SplitButton - Secondary
Precursor
CSS Unverified

A secondary split button.

Show Markup 
<div class="spectrum-SplitButton">
  <button class="spectrum-Button spectrum-Button--secondary spectrum-SplitButton-action">Split Button</button>
  <button class="spectrum-Button spectrum-Button--secondary spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<div class="spectrum-SplitButton spectrum-SplitButton--left">
  <button class="spectrum-Button spectrum-Button--secondary spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <button class="spectrum-Button spectrum-Button--secondary spectrum-SplitButton-action">Split Button</button>
</div>

SplitView - Horizontal
Beta Precursor
CSS Unverified

Horizontal SplitView

Left
Right
Show Markup 
<div class="spectrum-SplitView spectrum-SplitView--horizontal" style="height: 200px">
  <div class="spectrum-SplitView-pane" style="width: 304px">Left</div>
  <div class="spectrum-SplitView-splitter"></div>
  <div class="spectrum-SplitView-pane" style="flex: 1">Right</div>
</div>

SplitView - Horizontal Collapsed Left
Beta Precursor
CSS Unverified

Horizontally collapsed SplitView

Left
Right
Show Markup 
<div class="spectrum-SplitView spectrum-SplitView--horizontal" style="height: 200px">
  <div class="spectrum-SplitView-pane" style="width: 0">Left</div>
  <div class="spectrum-SplitView-splitter is-draggable is-collapsed-start">
    <div class="spectrum-SplitView-gripper"></div>
  </div>
  <div class="spectrum-SplitView-pane" style="flex: 1">Right</div>
</div>

SplitView - Horizontal Collapsed Right
Beta Precursor
CSS Unverified

Horizontally collapsed SplitView

Left
Right
Show Markup 
<div class="spectrum-SplitView spectrum-SplitView--horizontal" style="height: 200px">
  <div class="spectrum-SplitView-pane" style="flex: 1">Left</div>
  <div class="spectrum-SplitView-splitter is-draggable is-collapsed-end">
    <div class="spectrum-SplitView-gripper"></div>
  </div>
  <div class="spectrum-SplitView-pane" style="width: 0">Right</div>
</div>

SplitView - Horizontally Resizable
Beta Precursor
CSS Unverified

Horizontally resizable SplitView with gripper

Left
Right
Show Markup 
<div class="spectrum-SplitView spectrum-SplitView--horizontal" style="height: 200px">
  <div class="spectrum-SplitView-pane" style="width: 304px">Left</div>
  <div class="spectrum-SplitView-splitter is-draggable">
    <div class="spectrum-SplitView-gripper"></div>
  </div>
  <div class="spectrum-SplitView-pane" style="flex: 1">Right</div>
</div>

SplitView - Vertical Collapsed Bottom
Beta Precursor
CSS Unverified

Vertically collapsed SplitView

Left
Right
Show Markup 
<div class="spectrum-SplitView spectrum-SplitView--vertical" style="height: 200px">
  <div class="spectrum-SplitView-pane" style="flex: 1">Left</div>
  <div class="spectrum-SplitView-splitter is-draggable is-collapsed-end">
    <div class="spectrum-SplitView-gripper"></div>
  </div>
  <div class="spectrum-SplitView-pane" style="height: 0">Right</div>
</div>

SplitView - Vertical Collapsed Top
Beta Precursor
CSS Unverified

Vertically collapsed SplitView

Left
Right
Show Markup 
<div class="spectrum-SplitView spectrum-SplitView--vertical" style="height: 200px">
  <div class="spectrum-SplitView-pane" style="height: 0">Left</div>
  <div class="spectrum-SplitView-splitter is-draggable is-collapsed-start">
    <div class="spectrum-SplitView-gripper"></div>
  </div>
  <div class="spectrum-SplitView-pane" style="flex: 1">Right</div>
</div>

SplitView - Vertically Resizable
Beta Precursor
CSS Unverified

Vertically resizable SplitView with gripper

Left
Right
Show Markup 
<div class="spectrum-SplitView spectrum-SplitView--vertical" style="height: 200px">
  <div class="spectrum-SplitView-pane" style="height: 50px">Left</div>
  <div class="spectrum-SplitView-splitter is-draggable">
    <div class="spectrum-SplitView-gripper"></div>
  </div>
  <div class="spectrum-SplitView-pane" style="flex: 1">Right</div>
</div>

Status Light - Label Colors
Canon
CSS Verified

The default variant of Statuslight

Celery Status
Yellow Status
Fuchsia Status
Indigo Status
Seafoam Status
Chartreuse Status
Magenta Status
Purple Status
Show Markup 
<div class="spectrum-StatusLight spectrum-StatusLight--celery">Celery Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--yellow">Yellow Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--fuchsia">Fuchsia Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--indigo">Indigo Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--seafoam">Seafoam Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--chartreuse">Chartreuse Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--magenta">Magenta Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--purple">Purple Status</div>

Status Light - Semantic

Status Light (Neutral)
Canon
CSS Verified

The neutral semantic variant of Status Light

Paused
<div class="spectrum-StatusLight spectrum-StatusLight--neutral">Paused</div>

Status Light (Active)
Deprecated

Use the info variant instead

The active variant of Status Light

Active
<div class="spectrum-StatusLight spectrum-StatusLight--active">Active</div>

Status Light (Info)
Canon
CSS Verified

The informative semantic variant of Status Light

Active
<div class="spectrum-StatusLight spectrum-StatusLight--info">Active</div>

Status Light (Positive)
Canon
CSS Verified

The positive semantic variant of Status Light

Approved
<div class="spectrum-StatusLight spectrum-StatusLight--positive">Approved</div>

Status Light (Notice)
Canon
CSS Verified

The notice semantic variant of Status Light

Needs Approval
<div class="spectrum-StatusLight spectrum-StatusLight--notice">Needs Approval</div>

Status Light (Negative)
Canon
CSS Verified

The negative semantic variant of Status Light

Rejected
<div class="spectrum-StatusLight spectrum-StatusLight--negative">Rejected</div>

Status Light (disabled)
Canon
CSS Verified

The default variant of Statuslight

The disabled state of Status Light.

Disabled
<div class="spectrum-StatusLight is-disabled">Disabled</div>

Steplist
Precursor
CSS Unverified

A basic steplist.

Show Markup 
<div class="spectrum-Steplist spectrum-Steplist--small">
  <div class="spectrum-Steplist-item is-complete">
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Steplist-marker"></span>
    </span>
    <span class="spectrum-Steplist-segment">
    </span>
  </div>
  <div class="spectrum-Steplist-item is-complete">
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Steplist-marker"></span>
    </span>
    <span class="spectrum-Steplist-segment"></span>
  </div>
  <div class="spectrum-Steplist-item is-selected">
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Steplist-marker"></span>
    </span>
    <span class="spectrum-Steplist-segment"></span>
  </div>
  <div class="spectrum-Steplist-item">
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Steplist-marker"></span>
    </span>
    <span class="spectrum-Steplist-segment"></span>
  </div>
</div>

Steplist - With Label
Precursor
CSS Unverified

A steplist with labels

Step 1
Step 2
Step 3
Step 4
Show Markup 
<div class="spectrum-Steplist">
  <div class="spectrum-Steplist-item is-complete">
    <span class="spectrum-Steplist-label">Step 1</span>
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Steplist-marker"></span>
    </span>
    <span class="spectrum-Steplist-segment"></span>
  </div>
  <div class="spectrum-Steplist-item is-complete">
    <span class="spectrum-Steplist-label">Step 2</span>
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Steplist-marker"></span>
    </span>
    <span class="spectrum-Steplist-segment"></span>
  </div>
  <div class="spectrum-Steplist-item is-selected">
    <span class="spectrum-Steplist-label">Step 3</span>
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Steplist-marker"></span>
    </span>
    <span class="spectrum-Steplist-segment"></span>
  </div>
  <div class="spectrum-Steplist-item">
    <span class="spectrum-Steplist-label">Step 4</span>
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Steplist-marker"></span>
    </span>
    <span class="spectrum-Steplist-segment"></span>
  </div>
</div>

Steplist - With Tooltip
Precursor
CSS Unverified

A steplist with tooltips

Step 1
Step 2
Step 3
Step 4
Show Markup 
<div class="spectrum-Steplist">
  <div class="spectrum-Steplist-item u-tooltip-showOnHover is-complete">
    <div class="spectrum-Steplist-markerContainer">
      <div class="spectrum-Tooltip spectrum-Tooltip--top">
        <span class="spectrum-Tooltip-label">Step 1</span>
        <span class="spectrum-Tooltip-tip"></span>
      </div>
      <div class="spectrum-Steplist-marker">
      </div>
    </div>

    <span class="spectrum-Steplist-segment">
    </span>
  </div>
  <div class="spectrum-Steplist-item u-tooltip-showOnHover is-complete">
    <div class="spectrum-Steplist-markerContainer">
      <div class="spectrum-Tooltip spectrum-Tooltip--top">
        <span class="spectrum-Tooltip-label">Step 2</span>
        <span class="spectrum-Tooltip-tip"></span>
      </div>
      <div class="spectrum-Steplist-marker">
      </div>
    </div>

    <span class="spectrum-Steplist-segment">
    </span>
  </div>
  <div class="spectrum-Steplist-item u-tooltip-showOnHover">
    <div class="spectrum-Steplist-markerContainer">
      <div class="spectrum-Tooltip spectrum-Tooltip--top">
        <span class="spectrum-Tooltip-label">Step 3</span>
        <span class="spectrum-Tooltip-tip"></span>
      </div>
      <div class="spectrum-Steplist-marker">
      </div>
    </div>

    <span class="spectrum-Steplist-segment">
    </span>
  </div>
  <div class="spectrum-Steplist-item u-tooltip-showOnHover">
    <div class="spectrum-Steplist-markerContainer">
      <div class="spectrum-Tooltip spectrum-Tooltip--top">
        <span class="spectrum-Tooltip-label">Step 4</span>
        <span class="spectrum-Tooltip-tip"></span>
      </div>
      <div class="spectrum-Steplist-marker">
      </div>
    </div>

    <span class="spectrum-Steplist-segment">
    </span>
  </div>
</div>

Stepper
Deprecated

Note that you must manually apply the .is-focused class, and that the .is-focused styles below don't look correct unless your cursor is actually in the stepper input field.

Show Markup 
<div class="spectrum-Stepper">
  <input type="number" class="spectrum-Textfield spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5">
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </svg>
    </button>
  </span>
</div>

<div class="spectrum-Stepper is-focused">
  <input type="number" class="spectrum-Textfield spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5">
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </svg>
    </button>
  </span>
</div>

<div class="spectrum-Stepper is-invalid">
  <input type="number" class="spectrum-Textfield spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5">
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </svg>
    </button>
  </span>
</div>

<div class="spectrum-Stepper">
  <input type="number" class="spectrum-Textfield spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5" disabled>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-Stepper-stepUp" tabindex="-1" disabled>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-Stepper-stepDown" tabindex="-1" disabled>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </svg>
    </button>
  </span>
</div>

Stepper - Quiet
Deprecated

The quiet variant of the Stepper.

Show Markup 
<div class="spectrum-Stepper spectrum-Stepper--quiet">
  <input type="number" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5">
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </svg>
    </button>
  </span>
</div>

<div class="spectrum-Stepper spectrum-Stepper--quiet is-focused">
  <input type="number" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5">
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </svg>
    </button>
  </span>
</div>

<div class="spectrum-Stepper spectrum-Stepper--quiet is-invalid">
  <input type="number" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5">
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </svg>
    </button>
  </span>
</div>

<div class="spectrum-Stepper spectrum-Stepper--quiet">
  <input type="number" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5" disabled>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Stepper-stepUp" tabindex="-1" disabled>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Stepper-stepDown" tabindex="-1" disabled>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </svg>
    </button>
  </span>
</div>

Switch - A/B toggle
Canon
CSS Verified

The a/b toggle variant of the switch.


Show Markup 
<div class="spectrum-ToggleSwitch spectrum-ToggleSwitch--ab">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-ab-0">
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-ab-0">Toggle A</label>
</div>
<div class="spectrum-ToggleSwitch spectrum-ToggleSwitch--ab">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-ab-1" checked>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-ab-1">Toggle B</label>
</div>

<br>

<div class="spectrum-ToggleSwitch spectrum-ToggleSwitch--ab">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-disabled-0" disabled>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-disabled-0">Toggle A</label>
</div>
<div class="spectrum-ToggleSwitch spectrum-ToggleSwitch--ab">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-disabled-1" checked disabled>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-disabled-1">Toggle B</label>
</div>

Switch - On/Off
Canon
CSS Verified

The on/off variant of the Switch.


Show Markup 
<div class="spectrum-ToggleSwitch">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-0">
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-0">Toggle Off</label>
</div>
<div class="spectrum-ToggleSwitch">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-1" checked>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-1">Toggle On</label>
</div>

<br>

<div class="spectrum-ToggleSwitch">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-disabled-0" disabled>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-disabled-0">Toggle Off</label>
</div>
<div class="spectrum-ToggleSwitch">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-disabled-1" checked disabled>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-disabled-1">Toggle On</label>
</div>

Switch - On/Off - Quiet
Canon
CSS Verified

The quiet variant of the Switch.


Show Markup 
<div class="spectrum-ToggleSwitch spectrum-ToggleSwitch--quiet">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-0">
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-0">Toggle Off</label>
</div>
<div class="spectrum-ToggleSwitch spectrum-ToggleSwitch--quiet">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-1" checked>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-1">Toggle On</label>
</div>

<br>

<div class="spectrum-ToggleSwitch spectrum-ToggleSwitch--quiet">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-disabled-0" disabled>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-disabled-0">Toggle Off</label>
</div>
<div class="spectrum-ToggleSwitch spectrum-ToggleSwitch--quiet">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-disabled-1" checked disabled>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-disabled-1">Toggle On</label>
</div>

Table
Canon
CSS Unverified

The default variant for Table

Column Title Column Title Column Title
Row Item Alpha Row Item Alpha Row Item Alpha
Row Item Bravo Row Item Bravo Row Item Bravo
Row Item Charlie Row Item Charlie Row Item Charlie
Row Item Delta Row Item Delta Row Item Delta
Row Item Echo Row Item Echo Row Item Echo
Show Markup 
<table class="spectrum-Table">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="none">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell">Column Title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Alpha</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Alpha</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Bravo</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Bravo</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Bravo</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Charlie</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Charlie</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Charlie</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Delta</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Delta</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Delta</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Echo</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Echo</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Echo</td>
    </tr>
  </tbody>
</table>

Table - Column Dividers
Canon
CSS Unverified

The standard table with column dividers

Column Title Column Title Column Title
Row Item Alpha Row Item Alpha Row Item Alpha
Row Item Bravo Row Item Bravo Row Item Bravo
Row Item Charlie Row Item Charlie Row Item Charlie
Row Item Delta Row Item Delta Row Item Delta
Row Item Echo Row Item Echo Row Item Echo
Show Markup 
<table class="spectrum-Table">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell is-sortable is-sorted-asc" aria-sort="ascending" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell is-sortable"" aria-sort="none" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell">Column Title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell spectrum-Table-cell--divider">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell spectrum-Table-cell--divider">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell spectrum-Table-cell--divider">Row Item Charlie</td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell spectrum-Table-cell--divider">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell spectrum-Table-cell--divider">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
    </tr>
  </tbody>
</table>

Table - Divs
Canon
CSS Unverified

The standard table with divs

Column Title
Column Title
Column Title
Row Item Alpha
Row Item Alpha
Row Item Alpha
Row Item Bravo
Row Item Bravo
Row Item Bravo
Row Item Charlie
Row Item Charlie
Row Item Charlie
Row Item Delta
Row Item Delta
Row Item Delta
Row Item Echo
Row Item Echo
Row Item Echo
Show Markup 
<div class="spectrum-Table" role="grid">
  <div class="spectrum-Table-head" style="display: flex" role="row">
    <div class="spectrum-Table-headCell is-sortable is-sorted-desc" style="flex: 1" role="columnheader" aria-sort="descending" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell is-sortable" style="flex: 1" role="columnheader" aria-sort="none">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell" style="flex: 1" role="columnheader">Column Title</div>
  </div>
  <div class="spectrum-Table-body" style="height: 120px" role="rowgroup">
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Alpha</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Bravo</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Charlie</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Delta</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Echo</div>
    </div>
  </div>
</div>

Table - Divs Quiet
Canon
CSS Unverified

The default variant for Table

The standard table with divs

Column Title
Column Title
Column Title
Row Item Alpha
Row Item Alpha
Row Item Alpha
Row Item Bravo
Row Item Bravo
Row Item Bravo
Row Item Charlie
Row Item Charlie
Row Item Charlie
Row Item Delta
Row Item Delta
Row Item Delta
Row Item Echo
Row Item Echo
Row Item Echo
Show Markup 
<div class="spectrum-Table spectrum-Table--quiet" role="grid">
  <div class="spectrum-Table-head" style="display: flex" role="row">
    <div class="spectrum-Table-headCell is-sortable is-sorted-desc" style="flex: 1" role="columnheader" aria-sort="descending" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell is-sortable" style="flex: 1" role="columnheader" aria-sort="none" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell" style="flex: 1" role="columnheader">Column Title</div>
  </div>
  <div class="spectrum-Table-body" style="height: 120px" role="rowgroup">
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
    </div>
  </div>
</div>

Table - Dropzone

Tables that accept dropped content.

Table - Body Dropzone
Beta Precursor
CSS Unverified
Column Title
Column Title
Column Title
Row Item Alpha
Row Item Alpha
Row Item Alpha
Row Item Bravo
Row Item Bravo
Row Item Bravo
Row Item Charlie
Row Item Charlie
Row Item Charlie
Row Item Delta
Row Item Delta
Row Item Delta
Row Item Echo
Row Item Echo
Row Item Echo
Show Markup 
<div class="spectrum-Table" role="grid">
  <div class="spectrum-Table-head" style="display: flex" role="row">
    <div class="spectrum-Table-headCell is-sortable is-sorted-desc" style="flex: 1" role="columnheader" aria-sort="descending" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell is-sortable" style="flex: 1" role="columnheader" aria-sort="none" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell" style="flex: 1" role="columnheader">Column Title</div>
  </div>
  <div class="spectrum-Table-body is-drop-target" style="height: 120px" role="rowgroup">
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
    </div>
  </div>
</div>

Table - Body Dropzone (quiet)
Beta Precursor
CSS Unverified
Column Title
Column Title
Column Title
Row Item Alpha
Row Item Alpha
Row Item Alpha
Row Item Bravo
Row Item Bravo
Row Item Bravo
Row Item Charlie
Row Item Charlie
Row Item Charlie
Row Item Delta
Row Item Delta
Row Item Delta
Row Item Echo
Row Item Echo
Row Item Echo
Show Markup 
<div class="spectrum-Table spectrum-Table--quiet" role="grid">
  <div class="spectrum-Table-head" style="display: flex" role="row">
    <div class="spectrum-Table-headCell is-sortable is-sorted-desc" style="flex: 1" role="columnheader" aria-sort="descending" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell is-sortable" style="flex: 1" role="columnheader" aria-sort="none" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell" style="flex: 1" role="columnheader">Column Title</div>
  </div>
  <div class="spectrum-Table-body is-drop-target" style="height: 120px" role="rowgroup">
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
    </div>
  </div>
</div>

Table - Row Dropzone (quiet)
Beta Precursor
CSS Unverified
Column Title
Column Title
Column Title
Row Item Alpha
Row Item Alpha
Row Item Alpha
Row Item Bravo
Row Item Bravo
Row Item Bravo
Row Item Charlie
Row Item Charlie
Row Item Charlie
Row Item Delta
Row Item Delta
Row Item Delta
Row Item Echo
Row Item Echo
Row Item Echo
Show Markup 
<div class="spectrum-Table" role="grid">
  <div class="spectrum-Table-head" style="display: flex" role="row">
    <div class="spectrum-Table-headCell is-sortable is-sorted-desc" style="flex: 1" role="columnheader" aria-sort="descending" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell is-sortable" style="flex: 1" role="columnheader" aria-sort="none" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell" style="flex: 1" role="columnheader">Column Title</div>
  </div>
  <div class="spectrum-Table-body" style="height: 120px" role="rowgroup">
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
    </div>
    <div class="spectrum-Table-row is-drop-target" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
    </div>
  </div>
</div>

Table - Row Dropzone (quiet)
Beta Precursor
CSS Unverified
Column Title
Column Title
Column Title
Row Item Alpha
Row Item Alpha
Row Item Alpha
Row Item Bravo
Row Item Bravo
Row Item Bravo
Row Item Charlie
Row Item Charlie
Row Item Charlie
Row Item Delta
Row Item Delta
Row Item Delta
Row Item Echo
Row Item Echo
Row Item Echo
Show Markup 
<div class="spectrum-Table spectrum-Table--quiet" role="grid">
  <div class="spectrum-Table-head" style="display: flex" role="row">
    <div class="spectrum-Table-headCell is-sortable is-sorted-desc" style="flex: 1" role="columnheader" aria-sort="descending" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell is-sortable" style="flex: 1" role="columnheader" aria-sort="none" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell" style="flex: 1" role="columnheader">Column Title</div>
  </div>
  <div class="spectrum-Table-body" style="height: 120px" role="rowgroup">
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
    </div>
    <div class="spectrum-Table-row is-drop-target" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
    </div>
  </div>
</div>

Table - Multi-Select
Canon
CSS Unverified

The standard multi-select table

Column Title Column Title Column Title
Row Item Alpha Row Item Alpha Row Item Alpha
Row Item Bravo Row Item Bravo Row Item Bravo
Row Item Charlie Row Item Charlie Row Item Charlie
Row Item Delta Row Item Delta Row Item Delta
Row Item Echo Row Item Echo Row Item Echo
Show Markup 
<table class="spectrum-Table">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select All">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </th>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="none" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell">Column Title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell">
        Row Item Alpha
      </td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row is-selected" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" checked title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell">
        Row Item Bravo
      </td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
    </tr>
    <tr class="spectrum-Table-row is-selected" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" checked title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell">
        Row Item Charlie
      </td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
    </tr>
    <tr class="spectrum-Table-row" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell">
        Row Item Delta
      </td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
    </tr>
    <tr class="spectrum-Table-row" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell">
        Row Item Echo
      </td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
    </tr>
  </tbody>
</table>

Table - Quiet
Canon
CSS Unverified

The quiet table

Column Title Column Title Column Title
Row Item Alpha Row Item Alpha Row Item Alpha
Row Item Bravo Row Item Bravo Row Item Bravo
Row Item Charlie Row Item Charlie Row Item Charlie
Row Item Delta Row Item Delta Row Item Delta
Row Item Echo Row Item Echo Row Item Echo
Show Markup 
<table class="spectrum-Table spectrum-Table--quiet">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="descending">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell">Column Title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Alpha</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Alpha</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Bravo</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Bravo</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Bravo</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Charlie</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Charlie</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Charlie</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Delta</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Delta</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Delta</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Echo</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Echo</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Echo</td>
    </tr>
  </tbody>
</table>

Table - Quiet Multi-Select
Canon
CSS Unverified

The quiet multi-select table

Column Title Column Title Column Title
Row Item Alpha Row Item Alpha Row Item Alpha
Row Item Bravo Row Item Bravo Row Item Bravo
Row Item Charlie Row Item Charlie Row Item Charlie
Row Item Delta Row Item Delta Row Item Delta
Row Item Echo Row Item Echo Row Item Echo
Show Markup 
<table class="spectrum-Table spectrum-Table--quiet">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select All">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </th>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="none" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell">Column Title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell">
        Row Item Alpha
      </td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row is-selected" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" checked title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell">
        Row Item Bravo
      </td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
    </tr>
    <tr class="spectrum-Table-row is-selected" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" checked title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell">
        Row Item Charlie
      </td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
    </tr>
    <tr class="spectrum-Table-row" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell">
        Row Item Delta
      </td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
    </tr>
    <tr class="spectrum-Table-row" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell">
        Row Item Echo
      </td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
    </tr>
  </tbody>
</table>

Tabs

Basic tabs
Canon
CSS Verified

Standard Tabs

Show Markup 
<div class="spectrum-Tabs spectrum-Tabs--horizontal">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 27px; left: 0px;"></div>
</div>

Tabs with icons
Canon
CSS Unverified

The Icon variant of Tabs

Show Markup 
<div class="spectrum-Tabs spectrum-Tabs--horizontal">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Folder" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
      <use xlink:href="#spectrum-icon-18-Filter" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
      <use xlink:href="#spectrum-icon-18-Comment" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 55px; left: 0px;"></div>
</div>

Tabs - Compact
Deprecated

Compact tabs should never be used without the quiet variation. Please use Quiet Compact Tabs instead.

Compact tabs

Compact Tabs, should only be used as quiet

Show Markup 
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 27px; left: 0px;"></div>
</div>

Compact tabs with icons and text
Show Markup 
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Folder" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
      <use xlink:href="#spectrum-icon-18-Filter" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
      <use xlink:href="#spectrum-icon-18-Comment" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 55px; left: 0px;"></div>
</div>

Compact tabs with icons
Show Markup 
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Folder" />
    </svg>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
      <use xlink:href="#spectrum-icon-18-Filter" />
    </svg>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
      <use xlink:href="#spectrum-icon-18-Comment" />
    </svg>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 17px; left: 0px;"></div>
</div>

Tabs - Compact Vertical

Compact vertical tabs
Canon
CSS Unverified

The Compact Vertical variant of Tabs

Show Markup 
<div class="spectrum-Tabs spectrum-Tabs--vertical spectrum-Tabs--compact">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="height: 32px; top: 0px;"></div>
</div>

Compact vertical tabs with icon and text
Beta Precursor
CSS Unverified
Show Markup 
<div class="spectrum-Tabs spectrum-Tabs--vertical spectrum-Tabs--compact">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Folder" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
      <use xlink:href="#spectrum-icon-18-Filter" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
      <use xlink:href="#spectrum-icon-18-Comment" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="height: 32px; top: 0px;"></div>
</div>

Tabs - Quiet
Canon
CSS Verified

Tabs (Quiet)

Quiet Tabs

Show Markup 
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--quiet">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 27px; left: 0px;"></div>
</div>

Quiet tabs with icons

The Quiet Icon variant of Tabs

Show Markup 
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--quiet">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Folder" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
      <use xlink:href="#spectrum-icon-18-Filter" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
      <use xlink:href="#spectrum-icon-18-Comment" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 55px; left: 0px;"></div>
</div>

Tabs - Quiet Compact

Tabs (Quiet Compact)
Canon
CSS Verified

Compact Tabs, available as quiet only

Show Markup 
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact spectrum-Tabs--quiet">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 27px; left: 0px;"></div>
</div>

Quiet compact tabs with icons and text
Beta Precursor
CSS Unverified
Show Markup 
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact spectrum-Tabs--quiet">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Folder" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
      <use xlink:href="#spectrum-icon-18-Filter" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
      <use xlink:href="#spectrum-icon-18-Comment" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 55px; left: 0px;"></div>
</div>

Quiet compact tabs with icons only
Beta Precursor
CSS Unverified
Show Markup 
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact spectrum-Tabs--quiet">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Folder" />
    </svg>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
      <use xlink:href="#spectrum-icon-18-Filter" />
    </svg>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
      <use xlink:href="#spectrum-icon-18-Comment" />
    </svg>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 17px; left: 0px;"></div>
</div>

Tabs - Too many
Canon
CSS Verified

How to handle too many tabs.

Basic tabs with overflow

Standard Tabs

Closed

Open

  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4
Show Markup 
<h4>Closed</h4>
<div class="spectrum-Tabs spectrum-Tabs--horizontal" style="width: 409px">
    <div class="spectrum-Dropdown spectrum-Dropdown--quiet">
      <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Dropdown-trigger is-selected" aria-haspopup="true">
        <span class="spectrum-Dropdown-label">Tab 1</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
        </svg>
      </button>
    </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 50px; left: 8px;"></div>
</div>

<h4 style="margin-top: 62px;">Open</h4>
<div class="spectrum-Tabs spectrum-Tabs--horizontal" style="width: 409px">
    <div class="spectrum-Dropdown spectrum-Dropdown--quiet is-open">
      <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Dropdown-trigger is-selected" aria-haspopup="true">
        <span class="spectrum-Dropdown-label">Tab 1</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
        </svg>
      </button>
    </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 50px; left: 8px;"></div>
</div>
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover spectrum-Dropdown-popover--quiet is-open" style="margin-left: -5px; margin-top: -9px;">
  <ul class="spectrum-Menu" role="listbox">
    <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Tab 1</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Tab 2</span>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Tab 3</span>
    </li>
    <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
      <span class="spectrum-Menu-itemLabel">Tab 4</span>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>

Compact tabs with overflow

Standard Tabs

Closed

Open


  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4
Show Markup 
<h4>Closed</h4>
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--quiet spectrum-Tabs--compact" style="width: 409px">
    <div class="spectrum-Dropdown spectrum-Dropdown--quiet">
      <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Dropdown-trigger is-selected" aria-haspopup="true">
        <span class="spectrum-Dropdown-label">Tab 1</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
        </svg>
      </button>
    </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 50px; left: 8px;"></div>
</div>

<h4 style="margin-top: 62px;">Open</h4>
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--quiet spectrum-Tabs--compact" style="width: 409px">
    <div class="spectrum-Dropdown spectrum-Dropdown--quiet is-open">
      <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Dropdown-trigger is-selected" aria-haspopup="true">
        <span class="spectrum-Dropdown-label">Tab 1</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
        </svg>
      </button>
    </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 50px; left: 8px;"></div>
</div>
<br>
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover spectrum-Dropdown-popover--quiet is-open" style="margin-left: -5px; margin-top: -9px;">
  <ul class="spectrum-Menu" role="listbox">
    <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Tab 1</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Tab 2</span>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Tab 3</span>
    </li>
    <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
      <span class="spectrum-Menu-itemLabel">Tab 4</span>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>

Tabs - Vertical

Vertical tabs
Canon
CSS Unverified

The Vertical variant of Tabs

Show Markup 
<div class="spectrum-Tabs spectrum-Tabs--vertical">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="height: 46px; top: 0px;"></div>
</div>

Vertical tabs with icon and text
Beta Precursor
CSS Unverified
Show Markup 
<div class="spectrum-Tabs spectrum-Tabs--vertical">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Folder" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
      <use xlink:href="#spectrum-icon-18-Filter" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
      <use xlink:href="#spectrum-icon-18-Comment" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="height: 46px; top: 0px;"></div>
</div>

Tags
Canon
CSS Verified

A taglist with items that cannot be edited.

Tag 1
Tag 2
Tag 2


Avatar Shantanu
Avatar Shantanu
Avatar Shantanu


Shantanu
Shantanu
Shantanu
Show Markup 
<div class="spectrum-Tags" role="list" aria-label="list">
  <div class="spectrum-Tags-item" role="listitem">
    <span class="spectrum-Tags-itemLabel">Tag 1</span>
  </div>
  <div class="spectrum-Tags-item is-invalid" role="listitem">
    <span class="spectrum-Tags-itemLabel">Tag 2</span>
  </div>
  <div class="spectrum-Tags-item is-disabled" role="listitem">
    <span class="spectrum-Tags-itemLabel">Tag 2</span>
  </div>
</div>

<br><br>

<div class="spectrum-Tags" role="list" aria-label="Tags">
  <div class="spectrum-Tags-item" role="listitem" tabindex="0">
    <img class="spectrum-Avatar" src="img/example-ava.jpg" alt="Avatar">
    <span class="spectrum-Tags-itemLabel">Shantanu</span>
  </div>
  <div class="spectrum-Tags-item is-invalid" role="listitem" tabindex="0">
    <img class="spectrum-Avatar" src="img/example-ava.jpg" alt="Avatar">
    <span class="spectrum-Tags-itemLabel">Shantanu</span>
  </div>
  <div class="spectrum-Tags-item is-disabled" role="listitem">
    <img class="spectrum-Avatar" src="img/example-ava.jpg" alt="Avatar">
    <span class="spectrum-Tags-itemLabel">Shantanu</span>
  </div>
</div>

<br><br>

<div class="spectrum-Tags" role="list" aria-label="Tags">
  <div class="spectrum-Tags-item" role="listitem" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="Tag">
      <use xlink:href="#spectrum-icon-24-SentimentPositive" />
    </svg>
    <span class="spectrum-Tags-itemLabel">Shantanu</span>
  </div>
  <div class="spectrum-Tags-item is-invalid" role="listitem" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="Tag">
      <use xlink:href="#spectrum-icon-24-SentimentPositive" />
    </svg>
    <span class="spectrum-Tags-itemLabel">Shantanu</span>
  </div>
  <div class="spectrum-Tags-item is-disabled" role="listitem">
    <svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="Tag">
      <use xlink:href="#spectrum-icon-24-SentimentPositive" />
    </svg>
    <span class="spectrum-Tags-itemLabel">Shantanu</span>
  </div>
</div>

Tags - Deletable
Canon
CSS Verified

An editable taglist.

Tag 1
Tag 2
Tag 2


Avatar Shantanu
Avatar Shantanu
Avatar Shantanu


Shantanu
Shantanu
Shantanu
Show Markup 
<div class="spectrum-Tags" role="list" aria-label="Tags">
  <div class="spectrum-Tags-item spectrum-Tags-item--deletable" tabindex="0" role="listitem">
    <span class="spectrum-Tags-itemLabel">Tag 1</span>
    <button class="spectrum-ClearButton spectrum-ClearButton--small" aria-label="Remove tag 1" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossSmall" />
      </svg>
    </button>
  </div>
  <div class="spectrum-Tags-item spectrum-Tags-item--deletable is-invalid" tabindex="0" role="listitem">
    <span class="spectrum-Tags-itemLabel">Tag 2</span>
    <button class="spectrum-ClearButton spectrum-ClearButton--small" aria-label="Remove tag 2" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossSmall" />
      </svg>
    </button>
  </div>
  <div class="spectrum-Tags-item spectrum-Tags-item--deletable is-disabled" role="listitem">
    <span class="spectrum-Tags-itemLabel">Tag 2</span>
    <button class="spectrum-ClearButton spectrum-ClearButton--small" aria-label="Remove tag 3" tabindex="-1" disabled>
      <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossSmall" />
      </svg>
    </button>
  </div>
</div>

<br><br>

<div class="spectrum-Tags" role="list" aria-label="Tags">
  <div class="spectrum-Tags-item spectrum-Tags-item--deletable" role="listitem" tabindex="0">
    <img class="spectrum-Avatar" src="img/example-ava.jpg" alt="Avatar">
    <span class="spectrum-Tags-itemLabel">Shantanu</span>
    <button class="spectrum-ClearButton spectrum-ClearButton--small" aria-label="Remove tag 2" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossSmall" />
      </svg>
    </button>
  </div>
  <div class="spectrum-Tags-item spectrum-Tags-item--deletable is-invalid" role="listitem" tabindex="0">
    <img class="spectrum-Avatar" src="img/example-ava.jpg" alt="Avatar">
    <span class="spectrum-Tags-itemLabel">Shantanu</span>
    <button class="spectrum-ClearButton spectrum-ClearButton--small" aria-label="Remove tag 2" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossSmall" />
      </svg>
    </button>
  </div>
  <div class="spectrum-Tags-item spectrum-Tags-item--deletable is-disabled" role="listitem">
    <img class="spectrum-Avatar" src="img/example-ava.jpg" alt="Avatar">
    <span class="spectrum-Tags-itemLabel">Shantanu</span>
    <button class="spectrum-ClearButton spectrum-ClearButton--small" aria-label="Remove tag 3" tabindex="-1" disabled>
      <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossSmall" />
      </svg>
    </button>
  </div>
</div>

<br><br>

<div class="spectrum-Tags" role="list" aria-label="Tags">
  <div class="spectrum-Tags-item spectrum-Tags-item--deletable" role="listitem" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="Tag">
      <use xlink:href="#spectrum-icon-24-SentimentPositive" />
    </svg>
    <span class="spectrum-Tags-itemLabel">Shantanu</span>
    <button class="spectrum-ClearButton spectrum-ClearButton--small" aria-label="Remove tag Shantanu" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossSmall" />
      </svg>
    </button>
  </div>
  <div class="spectrum-Tags-item spectrum-Tags-item--deletable is-invalid" role="listitem" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="Tag">
      <use xlink:href="#spectrum-icon-24-SentimentPositive" />
    </svg>
    <span class="spectrum-Tags-itemLabel">Shantanu</span>
    <button class="spectrum-ClearButton spectrum-ClearButton--small" aria-label="Remove tag Shantanu" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossSmall" />
      </svg>
    </button>
  </div>
  <div class="spectrum-Tags-item spectrum-Tags-item--deletable is-disabled" role="listitem">
    <svg class="spectrum-Icon spectrum-Icon--sizeXS" focusable="false" aria-hidden="true" aria-label="Tag">
      <use xlink:href="#spectrum-icon-24-SentimentPositive" />
    </svg>
    <span class="spectrum-Tags-itemLabel">Shantanu</span>
    <button class="spectrum-ClearButton spectrum-ClearButton--small" aria-label="Remove tag Shantanu" tabindex="-1" disabled>
      <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossSmall" />
      </svg>
    </button>
  </div>
</div>

Text Area
Canon
CSS Unverified

A Spectrum text area - (a multiline text field)

Show Markup 
<textarea placeholder="Enter your life story" name="field" class="spectrum-Textfield spectrum-Textfield--multiline">
</textarea>

<textarea placeholder="Enter your life story" name="field" class="spectrum-Textfield spectrum-Textfield--multiline" disabled>
</textarea>

<textarea placeholder="Enter your life story" name="field" class="spectrum-Textfield spectrum-Textfield--multiline is-valid" required>
</textarea>

<textarea placeholder="Enter your life story" name="field" class="spectrum-Textfield spectrum-Textfield--multiline is-invalid" required>
</textarea>

<textarea lang="ja" placeholder="電子メールアドレスを入力" name="field" class="spectrum-Textfield spectrum-Textfield--multiline is-invalid" required>
</textarea>

Text Area - Quiet
Canon
CSS Unverified

A Spectrum text area - quiet

Show Markup 
<textarea placeholder="Enter your life story" name="field" class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet">
</textarea>

<textarea placeholder="Enter your life story" name="field" class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet" disabled>
</textarea>

<textarea placeholder="Enter your life story" name="field" class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-valid" required>
  A valid Text Area
</textarea>

<textarea placeholder="Enter your life story" name="field" class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-invalid" required>
</textarea>

Text Field
Canon
CSS Verified

A text field is used to input and edit custom text entries.

A Spectrum text field

Show Markup 
<input type="text" placeholder="Enter your name" name="field" value="" class="spectrum-Textfield">

<input type="text" placeholder="Enter your name" name="field" value="" class="spectrum-Textfield" disabled>

<input type="text" placeholder="Enter your name" name="field" value="A valid input" class="spectrum-Textfield is-valid" pattern="[\w\s]+" required>

<input type="text" placeholder="Enter your name" name="field" value="A valid input" class="spectrum-Textfield is-valid" pattern="[\w\s]+" required disabled>

<input type="text" placeholder="Enter your name" name="field" value="Not a valid input" class="spectrum-Textfield" pattern="[\d]+" required>

<input type="text" placeholder="Enter your name" name="field" value="Not a valid input" class="spectrum-Textfield is-invalid" disabled>

<input type="text" lang="ja" placeholder="電子メールアドレスを入力" name="field" value="" class="spectrum-Textfield">

Text Field - Decorated
Beta Precursor
CSS Unverified

A Spectrum text field with an additional icon. The icon must be the Small size (18px) in order for it to be positioned correctly.

Default

Multiline

Show Markup 
<h4>Default</h4>
<div class="spectrum-DecoratedTextfield is-decorated">
  <label for="DecoratedTextField-single" class="spectrum-FieldLabel">Search</label>

  <input id="DecoratedTextField-single" placeholder="Enter your name" class="spectrum-Textfield spectrum-DecoratedTextfield-field" aria-invalid="false" type="text">

  <svg class="spectrum-Icon spectrum-UIIcon-InfoMedium spectrum-Icon--sizeS spectrum-DecoratedTextfield-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-InfoMedium" />
  </svg>
</div>

<h4>Multiline</h4>
<div class="spectrum-DecoratedTextfield is-decorated">
  <label for="DecoratedTextField-multiline" class="spectrum-FieldLabel spectrum-FieldLabel--left">Search</label>

  <textarea id="DecoratedTextField-multiline" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield spectrum-Textfield--multiline spectrum-DecoratedTextfield-field"></textarea>

  <svg class="spectrum-Icon spectrum-UIIcon-InfoMedium spectrum-Icon--sizeS spectrum-DecoratedTextfield-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-InfoMedium" />
  </svg>
</div>

Text Field - Quiet
Canon
CSS Verified

Quiet variant of a textfield.

A Spectrum text field - quiet

Show Markup 
<input type="text" placeholder="Enter your name" name="field" value="" class="spectrum-Textfield spectrum-Textfield--quiet">

<input type="text" placeholder="Enter your name" name="field" value="" class="spectrum-Textfield spectrum-Textfield--quiet" disabled>

<input type="text" placeholder="Enter your name" name="field" value="A valid input" class="spectrum-Textfield spectrum-Textfield--quiet is-valid" pattern="[\w\s]+" required>

<input type="text" placeholder="Enter your name" name="field" value="A valid input" class="spectrum-Textfield spectrum-Textfield--quiet is-valid" pattern="[\w\s]+" required disabled>

<input type="text" placeholder="Enter your name" name="field" value="Not a valid input" class="spectrum-Textfield spectrum-Textfield--quiet" pattern="[\d]+" required>

<input type="text" placeholder="Enter your name" name="field" value="Not a valid input" class="spectrum-Textfield spectrum-Textfield--quiet is-invalid" disabled>

<input type="text" lang="ja" placeholder="電子メールアドレスを入力" name="field" value="" class="spectrum-Textfield spectrum-Textfield--quiet">

Toast

Toast - Default
Canon
CSS Verified

The default variant of Toast

Button.xd has been archived
Show Markup 
<div class="spectrum-Toast">
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">Button.xd has been archived</div>
    <button class="spectrum-Button spectrum-Button--overBackground spectrum-Button--quiet">
      <span class="spectrum-Button-label">Undo</span>
    </button>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossMedium focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossMedium" />
      </svg>
    </button>
  </div>
</div>

Toast (Info)
Canon
CSS Verified

The info variant of Toast

The toast is done
Show Markup 
<div class="spectrum-Toast spectrum-Toast--info">
  <svg class="spectrum-Icon spectrum-UIIcon-InfoMedium spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-InfoMedium" />
  </svg>
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">The toast is done</div>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossMedium focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossMedium" />
      </svg>
    </button>
  </div>
</div>

Toast (Negative)
Canon
CSS Verified

The negative variant of Toast

The toast is on fire
Show Markup 
<div class="spectrum-Toast spectrum-Toast--negative">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertMedium" />
  </svg>
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">The toast is on fire</div>
    <button class="spectrum-Button spectrum-Button--overBackground spectrum-Button--quiet">
      <span class="spectrum-Button-label">Eject</span>
    </button>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossMedium focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossMedium" />
      </svg>
    </button>
  </div>
</div>

Toast (Positive)
Canon
CSS Verified

The positive variant of Toast

The toast is golden brown
Show Markup 
<div class="spectrum-Toast spectrum-Toast--positive">
  <svg class="spectrum-Icon spectrum-UIIcon-SuccessMedium spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-SuccessMedium" />
  </svg>
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">The toast is golden brown</div>
    <button class="spectrum-Button spectrum-Button--overBackground spectrum-Button--quiet">
      <span class="spectrum-Button-label">Eject</span>
    </button>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossMedium focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossMedium" />
      </svg>
    </button>
  </div>
</div>

Toast Wrapping Behavior
Canon
CSS Verified
A new version of Lightroom Classic is now available


A new version of Lightroom Classic is now available


A new version of Lightroom Classic is now available


An update is available
Show Markup 

<div class="spectrum-Toast spectrum-Toast--info">
  <svg class="spectrum-Icon spectrum-UIIcon-InfoMedium spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-InfoMedium" />
  </svg>
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">
      A new version of Lightroom Classic is now available
    </div>
    <button class="spectrum-Button spectrum-Button--overBackground spectrum-Button--quiet">
      <span class="spectrum-Button-label">Update</span>
    </button>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossMedium focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossMedium" />
      </svg>
    </button>
  </div>
</div>

<br><br>

<div class="spectrum-Toast spectrum-Toast--info" style="width: 318px;">
  <svg class="spectrum-Icon spectrum-UIIcon-InfoMedium spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-InfoMedium" />
  </svg>
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">
      A new version of Lightroom Classic is now available
    </div>
    <button class="spectrum-Button spectrum-Button--overBackground spectrum-Button--quiet">
      <span class="spectrum-Button-label">Update</span>
    </button>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossMedium focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossMedium" />
      </svg>
    </button>
  </div>
</div>

<br><br>

<div class="spectrum-Toast spectrum-Toast--info" style="width: 332px;">
  <svg class="spectrum-Icon spectrum-UIIcon-InfoMedium spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-InfoMedium" />
  </svg>
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">
      A new version of Lightroom Classic is now available
    </div>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossMedium focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossMedium" />
      </svg>
    </button>
  </div>
</div>

<br><br>

<div class="spectrum-Toast spectrum-Toast--info">
  <svg class="spectrum-Icon spectrum-UIIcon-InfoMedium spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-InfoMedium" />
  </svg>
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">An update is available</div>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossMedium focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossMedium" />
      </svg>
    </button>
  </div>
</div>

Toast (Error)
Deprecated

Use negative variant instead

The error variant of Toast

The toast is on fire
Show Markup 
<div class="spectrum-Toast spectrum-Toast--error">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertMedium" />
  </svg>
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">The toast is on fire</div>
    <button class="spectrum-Button spectrum-Button--overBackground spectrum-Button--quiet">
      <span class="spectrum-Button-label">Eject</span>
    </button>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossMedium focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossMedium" />
      </svg>
    </button>
  </div>
</div>

Toast (Warning)
Deprecated

Use negative variant instead

The warning variant of Toast

The toast is on fire
Show Markup 
<div class="spectrum-Toast spectrum-Toast--warning">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertMedium" />
  </svg>
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">The toast is on fire</div>
    <button class="spectrum-Button spectrum-Button--overBackground spectrum-Button--quiet">
      <span class="spectrum-Button-label">Eject</span>
    </button>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossMedium focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossMedium" />
      </svg>
    </button>
  </div>
</div>

Toast (Success)
Deprecated

Use positive variant instead

The success variant of Toast

The toast is golden brown
Show Markup 
<div class="spectrum-Toast spectrum-Toast--success">
  <svg class="spectrum-Icon spectrum-UIIcon-SuccessMedium spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-SuccessMedium" />
  </svg>
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">The toast is golden brown</div>
    <button class="spectrum-Button spectrum-Button--overBackground spectrum-Button--quiet">
      <span class="spectrum-Button-label">Eject</span>
    </button>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossMedium focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossMedium" />
      </svg>
    </button>
  </div>
</div>

Deprecated Markup
Deprecated

The old markup for Toast (no .spectrum-Toast-body and both buttons inside of .spectrum-Toast-buttons) still works, but will be removed in the next major version.

Button.xd has been archived


Don't use this markup, it's deprecated
Show Markup 
<div class="spectrum-Toast">
  <div class="spectrum-Toast-content">Button.xd has been archived</div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-Button spectrum-Button--overBackground spectrum-Button--quiet">
      <span class="spectrum-Button-label">Undo</span>
    </button>
    <button class="spectrum-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossMedium focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossMedium" />
      </svg>
    </button>
  </div>
</div>

<br><br>

<div class="spectrum-Toast spectrum-Toast--info">
  <svg class="spectrum-Icon spectrum-UIIcon-InfoMedium spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-InfoMedium" />
  </svg>
  <div class="spectrum-Toast-content">Don't use this markup, it's deprecated</div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-Button spectrum-Button--overBackground spectrum-Button--quiet">
      <span class="spectrum-Button-label">Ok</span>
    </button>
    <button class="spectrum-ClearButton spectrum-ClearButton--medium spectrum-ClearButton--overBackground">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossMedium focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossMedium" />
      </svg>
    </button>
  </div>
</div>

Tool
Canon
CSS Verified

Tool buttons

The tool button.



Show Markup 
<button class="spectrum-Tool">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Brush">
    <use xlink:href="#spectrum-icon-18-Brush" />
  </svg>
</button>

<button class="spectrum-Tool is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Brush">
    <use xlink:href="#spectrum-icon-18-Brush" />
  </svg>
</button>

<button class="spectrum-Tool" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Brush">
    <use xlink:href="#spectrum-icon-18-Brush" />
  </svg>
</button>

<button class="spectrum-Tool is-selected" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Brush">
    <use xlink:href="#spectrum-icon-18-Brush" />
  </svg>
</button>

<br><br>

<button class="spectrum-Tool">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Brush">
    <use xlink:href="#spectrum-icon-18-Brush" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-Tool-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>

<button class="spectrum-Tool is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Brush">
    <use xlink:href="#spectrum-icon-18-Brush" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-Tool-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>

<button class="spectrum-Tool" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Brush">
    <use xlink:href="#spectrum-icon-18-Brush" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-Tool-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>

<button class="spectrum-Tool is-selected" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Brush">
    <use xlink:href="#spectrum-icon-18-Brush" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-Tool-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>

Tooltip

Tooltip - Neutral
Canon
CSS Verified
Label Lorem ipsum dolor sit amet, consectetur adipiscing elit
Show Markup 
<span class="spectrum-Tooltip spectrum-Tooltip--top is-open">
  <span class="spectrum-Tooltip-label">Label</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>
<span class="spectrum-Tooltip spectrum-Tooltip--top is-open">
  <span class="spectrum-Tooltip-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>

Tooltip - Informative
Canon
CSS Verified

This is the informative or info variant of Tooltip

Label Lorem ipsum dolor sit amet, consectetur adipiscing elit Info Lorem ipsum dolor sit amet, consectetur adipiscing elit
Show Markup 
<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--info is-open">
  <span class="spectrum-Tooltip-label">Label</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>
<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--info is-open">
  <span class="spectrum-Tooltip-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>
<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--info is-open">
  <svg class="spectrum-Icon spectrum-UIIcon-InfoSmall spectrum-Tooltip-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-InfoSmall" />
  </svg>
  <span class="spectrum-Tooltip-label">Info</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>
<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--info is-open">
  <svg class="spectrum-Icon spectrum-UIIcon-InfoSmall spectrum-Tooltip-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-InfoSmall" />
  </svg>
  <span class="spectrum-Tooltip-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>

Tooltip - Positive
Canon
CSS Verified

This is the postive (a.k.a.) success variant of Tooltip

Label Lorem ipsum dolor sit amet, consectetur adipiscing elit Success Lorem ipsum dolor sit amet, consectetur adipiscing elit
Show Markup 
<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--positive is-open">
  <span class="spectrum-Tooltip-label">Label</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>
<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--positive is-open">
  <span class="spectrum-Tooltip-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>
<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--positive is-open">
  <svg class="spectrum-Icon spectrum-UIIcon-SuccessSmall spectrum-Tooltip-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-SuccessSmall" />
  </svg>
  <span class="spectrum-Tooltip-label">Success</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>
<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--positive is-open">
  <svg class="spectrum-Icon spectrum-UIIcon-SuccessSmall spectrum-Tooltip-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-SuccessSmall" />
  </svg>
  <span class="spectrum-Tooltip-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>

Tooltip - Negative
Canon
CSS Verified

This is the negative a.k.a. error variant of Tooltip

Label Lorem ipsum dolor sit amet, consectetur adipiscing elit Warning Lorem ipsum dolor sit amet, consectetur adipiscing elit
Show Markup 
<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--negative is-open">
  <span class="spectrum-Tooltip-label">Label</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>
<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--negative is-open">
  <span class="spectrum-Tooltip-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>
<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--negative is-open">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertSmall spectrum-Tooltip-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertSmall" />
  </svg>
  <span class="spectrum-Tooltip-label">Warning</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>
<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--negative is-open">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertSmall spectrum-Tooltip-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertSmall" />
  </svg>
  <span class="spectrum-Tooltip-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>

Tooltip - Directions
Canon
CSS Verified

Tooltips can be top, bottom, left, or right.

Label

Label

Label

Label
Show Markup 
<span class="spectrum-Tooltip spectrum-Tooltip--top is-open">
  <span class="spectrum-Tooltip-label">Label</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>

<br><br>

<span class="spectrum-Tooltip spectrum-Tooltip--left is-open">
  <span class="spectrum-Tooltip-label">Label</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>

<br><br>

<span class="spectrum-Tooltip spectrum-Tooltip--right is-open">
  <span class="spectrum-Tooltip-label">Label</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>

<br><br>

<span class="spectrum-Tooltip spectrum-Tooltip--bottom is-open">
  <span class="spectrum-Tooltip-label">Label</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>

Tooltip - Success
Deprecated

Use positive instead.

Label
Show Markup 
<span class="spectrum-Tooltip spectrum-Tooltip--success spectrum-Tooltip--top is-open">
  <span class="spectrum-Tooltip-label">Label</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>

Tooltip - Error
Deprecated

Use negative instead.

Label
Show Markup 
<span class="spectrum-Tooltip spectrum-Tooltip--error spectrum-Tooltip--top is-open">
  <span class="spectrum-Tooltip-label">Label</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>

Tooltip - Help
Deprecated

Use info

An informative tooltip with a help icon.

Help
Show Markup 
<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--info is-open">
  <svg class="spectrum-Icon spectrum-UIIcon-HelpSmall spectrum-Tooltip-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-HelpSmall" />
  </svg>
  <span class="spectrum-Tooltip-label">Help</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>

Tooltip - Show on hover
Beta Precursor
Unverified

A tooltip that shows on hover using CSS only. Note that this approach does not support text wrapping.

Left
Tooltip Left
Bottom
Tooltip Bottom
Top
Tooltip Top
Right
Tooltip Right
Show Markup 
<span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
  Left
  <div class="spectrum-Tooltip spectrum-Tooltip--left">
    <span class="spectrum-Tooltip-label">Tooltip Left</span>
    <span class="spectrum-Tooltip-tip"></span>
  </div>
</span>
<span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
  Bottom
  <div class="spectrum-Tooltip spectrum-Tooltip--bottom">
    <span class="spectrum-Tooltip-label">Tooltip Bottom</span>
    <span class="spectrum-Tooltip-tip"></span>
  </div>
</span>
<span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
  Top
  <div class="spectrum-Tooltip spectrum-Tooltip--top">
    <span class="spectrum-Tooltip-label">Tooltip Top</span>
    <span class="spectrum-Tooltip-tip"></span>
  </div>
</span>
<span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
  Right
  <div class="spectrum-Tooltip spectrum-Tooltip--right">
    <span class="spectrum-Tooltip-label">Tooltip Right</span>
    <span class="spectrum-Tooltip-tip"></span>
  </div>
</span>

Tree View - Disabled
Beta Precursor
CSS Unverified

A nested Spectrum tree view with disabled item. Because the tree view is nested, the visibility of child items is controlled by the open state of the parent item.

Show Markup 
<ul class="spectrum-TreeView" style="width: 250px">
  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#">Layer 1</a>
  </li>

  <li class="spectrum-TreeView-item is-disabled">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
      </svg>
      Group 1
    </a>
    <ul class="spectrum-TreeView">
      <li class="spectrum-TreeView-item">
        <a class="spectrum-TreeView-itemLink" href="#">Layer 2</a>
      </li>
      <li class="spectrum-TreeView-item">
        <a class="spectrum-TreeView-itemLink" href="#">Layer 3</a>
      </li>
    </ul>
  </li>

  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#">Layer 4</a>
  </li>
  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#">Layer 5</a>
  </li>

  <li class="spectrum-TreeView-item is-open">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
      </svg>
      Group 2
    </a>
    <ul class="spectrum-TreeView">
      <li class="spectrum-TreeView-item is-open">
        <a class="spectrum-TreeView-itemLink" href="#">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
          </svg>
          Group 3
        </a>
        <ul class="spectrum-TreeView">
          <li class="spectrum-TreeView-item">
            <a class="spectrum-TreeView-itemLink" href="#">
              <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
              </svg>
              Group 4
            </a>
            <ul class="spectrum-TreeView">
              <li class="spectrum-TreeView-item">
                <a class="spectrum-TreeView-itemLink" href="#">Layer 6</a>
              </li>
              <li class="spectrum-TreeView-item">
                <a class="spectrum-TreeView-itemLink" href="#">
                  <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
                    <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
                  </svg>
                  Group 5
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ui>
  </li>
</ul>

Tree View - Flat
Precursor
CSS Unverified

Tree navigation for organizing the hierarchical things

A Spectrum tree view drawn without nesting, suitable for infinite scrolling. With this version of the tree, you must manage the visibility of "child items" manually based on the open state of the "parent item."

Show Markup 
<ul class="spectrum-TreeView" style="width: 250px">
  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#">Layer 1 with a long name that doesn't fit at all</a>
  </li>

  <li class="spectrum-TreeView-item is-open">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
      </svg>
      Group 1
    </a>
  </li>

  <li class="spectrum-TreeView-item spectrum-TreeView-item--indent1">
    <a class="spectrum-TreeView-itemLink" href="#">Layer 2</a>
  </li>

  <li class="spectrum-TreeView-item spectrum-TreeView-item--indent1">
    <a class="spectrum-TreeView-itemLink" href="#">Layer 3</a>
  </li>

  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#">Layer 4</a>
  </li>

  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#">Layer 5</a>
  </li>

  <li class="spectrum-TreeView-item is-open">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
      </svg>
      Group 2
    </a>
  </li>

  <li class="spectrum-TreeView-item spectrum-TreeView-item--indent1 is-open">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
      </svg>
      Group 3
    </a>
  </li>

  <li class="spectrum-TreeView-item spectrum-TreeView-item--indent2">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
      </svg>
      Group 4
    </a>
  </li>

  <li class="spectrum-TreeView-item spectrum-TreeView-item--indent3" hidden>
    <a class="spectrum-TreeView-itemLink" href="#">Layer 6</a>
  </li>

  <li class="spectrum-TreeView-item spectrum-TreeView-item--indent3" hidden>
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
      </svg>
      Group 5
    </a>
  </li>
</ul>

Tree View - Nested
Precursor
CSS Unverified

Tree navigation for organizing the hierarchical things

A nested Spectrum tree view. Because the tree view is nested, the visibility of child items is controlled by the open state of the parent item.

Show Markup 
<ul class="spectrum-TreeView" style="width: 250px">
  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#">Layer 1</a>
  </li>

  <li class="spectrum-TreeView-item is-open">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
      </svg>
      Group 1
    </a>
    <ul class="spectrum-TreeView">
      <li class="spectrum-TreeView-item">
        <a class="spectrum-TreeView-itemLink" href="#">Layer 2</a>
      </li>
      <li class="spectrum-TreeView-item">
        <a class="spectrum-TreeView-itemLink" href="#">Layer 3</a>
      </li>
    </ul>
  </li>

  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#">Layer 4</a>
  </li>
  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#">Layer 5</a>
  </li>

  <li class="spectrum-TreeView-item is-open">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
      </svg>
      Group 2
    </a>
    <ul class="spectrum-TreeView">
      <li class="spectrum-TreeView-item is-open">
        <a class="spectrum-TreeView-itemLink" href="#">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
          </svg>
          Group 3
        </a>
        <ul class="spectrum-TreeView">
          <li class="spectrum-TreeView-item">
            <a class="spectrum-TreeView-itemLink" href="#">
              <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
              </svg>
              Group 4
            </a>
            <ul class="spectrum-TreeView">
              <li class="spectrum-TreeView-item">
                <a class="spectrum-TreeView-itemLink" href="#">Layer 6</a>
              </li>
              <li class="spectrum-TreeView-item">
                <a class="spectrum-TreeView-itemLink" href="#">
                  <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
                    <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
                  </svg>
                  Group 5
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ui>
  </li>
</ul>

Tree View - Nested with icons
Precursor
CSS Unverified

Tree navigation for organizing the hierarchical things

A nested Spectrum tree view with icons

Show Markup 
<ul class="spectrum-TreeView" style="width: 250px">
  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Layers">
        <use xlink:href="#spectrum-icon-18-Layers"></use>
      </svg>
      Layer 1
    </a>
  </li>

  <li class="spectrum-TreeView-item is-open">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
      </svg>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
        <use xlink:href="#spectrum-icon-18-Folder"></use>
      </svg>
      Group 1
    </a>
    <ul class="spectrum-TreeView">
      <li class="spectrum-TreeView-item">
        <a class="spectrum-TreeView-itemLink" href="#">
          <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Layers">
            <use xlink:href="#spectrum-icon-18-Layers"></use>
          </svg>
          Layer 2
        </a>
      </li>
      <li class="spectrum-TreeView-item">
        <a class="spectrum-TreeView-itemLink" href="#">
          <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Layers">
            <use xlink:href="#spectrum-icon-18-Layers"></use>
          </svg>
          Layer 3
        </a>
      </li>
    </ul>
  </li>

  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Layers">
        <use xlink:href="#spectrum-icon-18-Layers"></use>
      </svg>
      Layer 4
    </a>
  </li>
  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Layers">
        <use xlink:href="#spectrum-icon-18-Layers"></use>
      </svg>
      Layer 5
    </a>
  </li>

  <li class="spectrum-TreeView-item is-open">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
      </svg>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
        <use xlink:href="#spectrum-icon-18-Folder"></use>
      </svg>
      Group 2
    </a>
    <ul class="spectrum-TreeView">
      <li class="spectrum-TreeView-item is-open">
        <a class="spectrum-TreeView-itemLink" href="#">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
          </svg>
          <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
            <use xlink:href="#spectrum-icon-18-Folder"></use>
          </svg>
          Group 3
        </a>
        <ul class="spectrum-TreeView">
          <li class="spectrum-TreeView-item">
            <a class="spectrum-TreeView-itemLink" href="#">
              <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
              </svg>
              <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
                <use xlink:href="#spectrum-icon-18-Folder"></use>
              </svg>
              Group 4
            </a>
            <ul class="spectrum-TreeView">
              <li class="spectrum-TreeView-item">
                <a class="spectrum-TreeView-itemLink" href="#">
                  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Layers">
                    <use xlink:href="#spectrum-icon-18-Layers"></use>
                  </svg>
                  Layer 6
                </a>
              </li>
              <li class="spectrum-TreeView-item">
                <a class="spectrum-TreeView-itemLink" href="#">
                  <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
                    <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
                  </svg>
                  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
                    <use xlink:href="#spectrum-icon-18-Folder"></use>
                  </svg>
                  Group 5
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ui>
  </li>
</ul>

Typography
Canon
CSS Verified

Typography elements paired to display clear content hierarchies.

Aliquet Mauris Eu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aliquet Mauris Eu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show Markup 
<div class="spectrum-Typography">
  <div style="max-width: 600px;">
  <h1 class="spectrum-Heading1">Aliquet Mauris Eu</h1>
  <p class="spectrum-Body1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
  <p class="spectrum-Body1">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <h2 class="spectrum-Heading2">Aliquet Mauris Eu</h1>
  <p class="spectrum-Body2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
  <p class="spectrum-Body2">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <h1 class="spectrum-Heading2">Lorem Ipsum Dolor</h1>
  <p class="spectrum-Body2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
  <p class="spectrum-Body2">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>


  <h1 class="spectrum-Heading3">Lorem Ipsum Dolor</h1>
  <p class="spectrum-Body3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
  <p class="spectrum-Body3">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>


  <h1 class="spectrum-Heading4">Lorem Ipsum Dolor</h1>
  <p class="spectrum-Body4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
  <p class="spectrum-Body4">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>


  <h1 class="spectrum-Heading5">Lorem Ipsum Dolor</h1>
  <p class="spectrum-Body5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
  <p class="spectrum-Body5">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>


  <h1 class="spectrum-Heading6">Lorem Ipsum Dolor</h1>
  <p class="spectrum-Body5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
  <p class="spectrum-Body5">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <h1 class="spectrum-Subheading">Lorem Ipsum Dolor</h1>
  <p class="spectrum-Body4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
  <p class="spectrum-Body4">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

Typography (Deprecated)
Deprecated

These styles can be replicated using new Typography classes

Typography elements.

Display (h1)

Page Title (h2)

Subtitle 1 (h2)

Subtitle 2 (h3)

Subtitle 3 (h4)

Small Body Text

Default Body Text

Secondary Body Text

Body Text Italic

Large Body Text

Show Markup 
<h1 class="spectrum-Heading--display">Display (h1)</h1>
<h2 class="spectrum-Heading--pageTitle">Page Title (h2)</h2>
<h2 class="spectrum-Heading--subtitle1">Subtitle 1 (h2)</h2>
<h3 class="spectrum-Heading--subtitle2">Subtitle 2 (h3)</h3>
<h4 class="spectrum-Heading--subtitle3">Subtitle 3 (h4)</h4>
<p class="spectrum-Body--small">Small Body Text</p>
<p class="spectrum-Body">Default Body Text</p>
<p class="spectrum-Body--secondary">Secondary Body Text</p>
<p class="spectrum-Body--italic"> Body Text Italic</p>
<p class="spectrum-Body--large">Large Body Text</p>

Typography - Article
Canon
CSS Verified

Typography elements paired to display clear content hierarchies in long form articles.

Heading 1

Body copy that pairs with heading 1

Heading 2

Body copy that pairs with heading 2

Heading 3

Body copy that pairs with heading 3

Heading 4

Body copy that pairs with heading 4

Heading 5

Body copy that pairs with heading 5

Show Markup 
<div class="spectrum-Article">
  <h1 class="spectrum-Heading1">Heading 1</h1>
  <p class="spectrum-Body1">Body copy that pairs with heading 1</p>

  <h2 class="spectrum-Heading2">Heading 2</h1>
  <p class="spectrum-Body2">Body copy that pairs with heading 2</p>

  <h3 class="spectrum-Heading3">Heading 3</h1>
  <p class="spectrum-Body3">Body copy that pairs with heading 3</p>

  <h4 class="spectrum-Heading4">Heading 4</h4>
  <p class="spectrum-Body4">Body copy that pairs with heading 4</p>

  <h5 class="spectrum-Heading5">Heading 5</h5>
  <p class="spectrum-Body5">Body copy that pairs with heading 5</p>
</div>

Typography - Body
Canon
CSS Verified

Default body text sizes.

Body1 Text Body1 Emphasis Body1 Strong.

Body2 text Body2 Emphasis Body2 Strong.

Body3 Text Body3 Emphasis Body3 Strong.

Body4 Text Body4 Emphasis Body4 Strong.

Body5 Text Body5 Emphasis Body5 Strong.

Article Body1 Text Article Body1 Emphasis Article Body1 Strong.

Article Body2 text Article Body2 Emphasis Article Body2 Strong.

Article Body3 Text Article Body3 Emphasis Article Body3 Strong.

Article Body4 Text Article Body4 Emphasis Article Body4 Strong.

Article Body5 Text Article Body5 Emphasis Article Body5 Strong.

見出し1 見出し1 重点 見出し1 強い強調.

見出し2 見出し2 重点 見出し2 強い強調.

見出し3 見出し3 重点 見出し3 強い強調.

見出し4 見出し4 重点 見出し4 強い強調.

見出し5 見出し5 重点 見出し5 強い強調.

القسم القسم تشديد القسم تأكيد قو.

القسم القسم 1 تشديد القسم 2 تأكيد قو.

القسم 3 القسم 3 تشديد القسم 3 تأكيد قو.

القسم 4 القسم 4 تشديد القسم 4 تأكيد قو.

القسم 5 القسم 5 تشديد القسم 5 تأكيد قو.

Show Markup 
<div class="spectrum" lang="en">
  <p class="spectrum-Body1">Body1 Text <em>Body1 Emphasis</em> <strong>Body1 Strong</strong>.</p>
  <p class="spectrum-Body2">Body2 text <em>Body2 Emphasis</em> <strong>Body2 Strong</strong>.</p>
  <p class="spectrum-Body3">Body3 Text <em>Body3 Emphasis</em> <strong>Body3 Strong</strong>.</p>
  <p class="spectrum-Body4">Body4 Text <em>Body4 Emphasis</em> <strong>Body4 Strong</strong>.</p>
  <p class="spectrum-Body5">Body5 Text <em>Body5 Emphasis</em> <strong>Body5 Strong</strong>.</p>
</div>

<div class="spectrum-Article">
  <p class="spectrum-Body1">Article Body1 Text <em>Article Body1 Emphasis</em> <strong>Article Body1 Strong</strong>.</p>
  <p class="spectrum-Body2">Article Body2 text <em>Article Body2 Emphasis</em> <strong>Article Body2 Strong</strong>.</p>
  <p class="spectrum-Body3">Article Body3 Text <em>Article Body3 Emphasis</em> <strong>Article Body3 Strong</strong>.</p>
  <p class="spectrum-Body4">Article Body4 Text <em>Article Body4 Emphasis</em> <strong>Article Body4 Strong</strong>.</p>
  <p class="spectrum-Body5">Article Body5 Text <em>Article Body5 Emphasis</em> <strong>Article Body5 Strong</strong>.</p>
</div>

<div class="spectrum" lang="ja">
  <p class="spectrum-Body1">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
  <p class="spectrum-Body2">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
  <p class="spectrum-Body3">見出し3 <em>見出し3 重点</em> <strong>見出し3 強い強調</strong>.</p>
  <p class="spectrum-Body4">見出し4 <em>見出し4 重点</em> <strong>見出し4 強い強調</strong>.</p>
  <p class="spectrum-Body5">見出し5 <em>見出し5 重点</em> <strong>見出し5 強い強調</strong>.</p>
</div>

<div class="spectrum" lang="ar">
  <p class="spectrum-Body1">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
  <p class="spectrum-Body2">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
  <p class="spectrum-Body3">القسم 3 <em>القسم 3 تشديد</em> <strong>القسم 3 تأكيد قو</strong>.</p>
  <p class="spectrum-Body4">القسم 4 <em>القسم 4 تشديد</em> <strong>القسم 4 تأكيد قو</strong>.</p>
  <p class="spectrum-Body5">القسم 5 <em>القسم 5 تشديد</em> <strong>القسم 5 تأكيد قو</strong>.</p>
</div>

Typography - Code
Canon
CSS Verified

Typographic styles for computer code.

Code1 Text Strong Code2 Text Strong Code3 Text Strong Code4 Text Strong Code5 Text Strong 
Code3 Text Wrapped in:
pre tags for
multiline
goodness
Show Markup 
<code class="spectrum-Code1">Code1 Text <strong>Strong</strong></code>
<code class="spectrum-Code2">Code2 Text <strong>Strong</strong></code>
<code class="spectrum-Code3">Code3 Text <strong>Strong</strong></code>
<code class="spectrum-Code4">Code4 Text <strong>Strong</strong></code>
<code class="spectrum-Code5">Code5 Text <strong>Strong</strong></code>
<pre><code class="spectrum-Code3">Code3 Text Wrapped in:
pre tags for
multiline
goodness</code></pre>

Typography - Display
Canon
CSS Verified

Display headings for typography.

Heading1 Emphasis Strong.

Heading2 Emphasis Strong.

Article Heading1 Emphasis Strong.

Article Heading2 Emphasis Strong.

見出し1 見出し1 重点 見出し1 強い強調.

見出し2 見出し2 重点 見出し2 強い強調.

القسم القسم تشديد القسم تأكيد قو.

القسم القسم 1 تشديد القسم 2 تأكيد قو.

Show Markup 
<div class="spectrum" lang="en">
  <p class="spectrum-Heading1--display">Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
  <p class="spectrum-Heading2--display">Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
</div>

<div class="spectrum-Article">
  <p class="spectrum-Heading1--display">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
  <p class="spectrum-Heading2--display">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
</div>

<div class="spectrum" lang="ja">
  <p class="spectrum-Heading1--display">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
  <p class="spectrum-Heading2--display">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
</div>

<div class="spectrum" lang="ar">
  <p class="spectrum-Heading1--display">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
  <p class="spectrum-Heading2--display">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
</div>

Typography - Display (Quiet)
Canon
CSS Verified

Quiet display headings for typography.

Heading1 Emphasis Strong.

Heading2 Emphasis Strong.

Article Heading1 Emphasis Strong.

Article Heading2 Emphasis Strong.

見出し1 見出し1 重点 見出し1 強い強調.

見出し2 見出し2 重点 見出し2 強い強調.

القسم القسم تشديد القسم تأكيد قو.

القسم القسم 1 تشديد القسم 2 تأكيد قو.

Show Markup 
<div class="spectrum" lang="en">
  <p class="spectrum-Heading1--display spectrum-Heading1--quiet">Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
  <p class="spectrum-Heading2--display spectrum-Heading2--quiet">Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
</div>

<div class="spectrum-Article">
  <p class="spectrum-Heading1--display spectrum-Heading1--quiet">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
  <p class="spectrum-Heading2--display spectrum-Heading2--quiet">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
</div>

<div class="spectrum" lang="ja">
  <p class="spectrum-Heading1--display spectrum-Heading1--quiet">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
  <p class="spectrum-Heading2--display spectrum-Heading2--quiet">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
</div>

<div class="spectrum" lang="ar">
  <p class="spectrum-Heading1--display spectrum-Heading1--quiet">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
  <p class="spectrum-Heading2--display spectrum-Heading2--quiet">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
</div>

Typography - Display (Strong)
Canon
CSS Verified

Strong display headings for typography.

Heading1 Emphasis Strong.

Heading2 Emphasis Strong.

見出し1 見出し1 重点 見出し1 強い強調.

見出し2 見出し2 重点 見出し2 強い強調.

القسم القسم تشديد القسم تأكيد قو.

القسم القسم 1 تشديد القسم 2 تأكيد قو.

Show Markup 
<div class="spectrum" lang="en">
  <p class="spectrum-Heading1--display spectrum-Heading1--strong">Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
  <p class="spectrum-Heading2--display spectrum-Heading2--strong">Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
</div>

<div class="spectrum" lang="ja">
  <p class="spectrum-Heading1--display spectrum-Heading1--strong">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
  <p class="spectrum-Heading2--display spectrum-Heading2--strong">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
</div>

<div class="spectrum" lang="ar">
  <p class="spectrum-Heading1--display spectrum-Heading1--strong">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
  <p class="spectrum-Heading2--display spectrum-Heading2--strong">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
</div>

Typography - Han
Canon
CSS Verified

Typographic pairings for Adobe Clean Han.

見出し1

見出しとよく対になる本文。

見出し2

見出しとよく対になる本文。

見出し13

見出しとよく対になる本文。

見出し14

見出しとよく対になる本文。

見出し15

見出しとよく対になる本文。

Show Markup 
<div lang="ja">
  <h1 class="spectrum-Heading1">見出し1</h1>
  <p class="spectrum-Body1">見出しとよく対になる本文。</p>

  <h2 class="spectrum-Heading2">見出し2</h1>
  <p class="spectrum-Body2">見出しとよく対になる本文。</p>

  <h3 class="spectrum-Heading3">見出し13</h1>
  <p class="spectrum-Body3">見出しとよく対になる本文。</p>

  <h4 class="spectrum-Heading4">見出し14</h4>
  <p class="spectrum-Body4">見出しとよく対になる本文。</p>

  <h5 class="spectrum-Heading5">見出し15</h5>
  <p class="spectrum-Body5">見出しとよく対になる本文。</p>
</div>

Typography - Heading
Canon
CSS Verified

Headings for typography.

Heading1 Heading1 Emphasis Heading1 Strong.

Heading2 Heading2 Emphasis Heading2 Strong.

Heading3 Heading3 Emphasis Heading3 Strong.

Heading4 Heading4 Emphasis Heading4 Strong.

Heading5 Heading5 Emphasis Heading5 Strong.

Article Heading1 Emphasis Strong.

Article Heading2 Emphasis Strong.

Article Heading3 Emphasis Strong.

Article Heading4 Emphasis Strong.

Article Heading5 Emphasis Strong.

見出し1 見出し1 重点 見出し1 強い強調.

見出し2 見出し2 重点 見出し2 強い強調.

見出し3 見出し3 重点 見出し3 強い強調.

見出し4 見出し4 重点 見出し4 強い強調.

見出し5 見出し5 重点 見出し5 強い強調.

القسم القسم تشديد القسم تأكيد قو.

القسم القسم 1 تشديد القسم 2 تأكيد قو.

القسم 3 القسم 3 تشديد القسم 3 تأكيد قو.

القسم 4 القسم 4 تشديد القسم 4 تأكيد قو.

القسم 5 القسم 5 تشديد القسم 5 تأكيد قو.

Show Markup 
<div class="spectrum" lang="en">
  <p class="spectrum-Heading1">Heading1 <em>Heading1 Emphasis</em> <strong>Heading1 Strong</strong>.</p>
  <p class="spectrum-Heading2">Heading2 <em>Heading2 Emphasis</em> <strong>Heading2 Strong</strong>.</p>
  <p class="spectrum-Heading3">Heading3 <em>Heading3 Emphasis</em> <strong>Heading3 Strong</strong>.</p>
  <p class="spectrum-Heading4">Heading4 <em>Heading4 Emphasis</em> <strong>Heading4 Strong</strong>.</p>
  <p class="spectrum-Heading5">Heading5 <em>Heading5 Emphasis</em> <strong>Heading5 Strong</strong>.</p>
</div>

<div class="spectrum-Article">
  <p class="spectrum-Heading1">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
  <p class="spectrum-Heading2">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
  <p class="spectrum-Heading3">Article Heading3 <em>Emphasis</em> <strong>Strong</strong>.</p>
  <p class="spectrum-Heading4">Article Heading4 <em>Emphasis</em> <strong>Strong</strong>.</p>
  <p class="spectrum-Heading5">Article Heading5 <em>Emphasis</em> <strong>Strong</strong>.</p>
</div>

<div class="spectrum" lang="ja">
  <p class="spectrum-Heading1">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
  <p class="spectrum-Heading2">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
  <p class="spectrum-Heading3">見出し3 <em>見出し3 重点</em> <strong>見出し3 強い強調</strong>.</p>
  <p class="spectrum-Heading4">見出し4 <em>見出し4 重点</em> <strong>見出し4 強い強調</strong>.</p>
  <p class="spectrum-Heading5">見出し5 <em>見出し5 重点</em> <strong>見出し5 強い強調</strong>.</p>
</div>

<div class="spectrum" lang="ar">
  <p class="spectrum-Heading1">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
  <p class="spectrum-Heading2">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
  <p class="spectrum-Heading3">القسم 3 <em>القسم 3 تشديد</em> <strong>القسم 3 تأكيد قو</strong>.</p>
  <p class="spectrum-Heading4">القسم 4 <em>القسم 4 تشديد</em> <strong>القسم 4 تأكيد قو</strong>.</p>
  <p class="spectrum-Heading5">القسم 5 <em>القسم 5 تشديد</em> <strong>القسم 5 تأكيد قو</strong>.</p>
</div>

Typography - Heading (Quiet)
Canon
CSS Verified

Quiet headings for typography.

Heading1 Heading1 Emphasis Heading1 Strong.

Heading2 Heading2 Emphasis Heading2 Strong.

Article Heading1 Emphasis Strong.

Article Heading2 Emphasis Strong.

見出し1 見出し1 重点 見出し1 強い強調.

見出し2 見出し2 重点 見出し2 強い強調.

القسم القسم تشديد القسم تأكيد قو.

القسم القسم 1 تشديد القسم 2 تأكيد قو.

Show Markup 
<div class="spectrum" lang="en">
  <p class="spectrum-Heading1--quiet">Heading1 <em>Heading1 Emphasis</em> <strong>Heading1 Strong</strong>.</p>
  <p class="spectrum-Heading2--quiet">Heading2 <em>Heading2 Emphasis</em> <strong>Heading2 Strong</strong>.</p>
</div>

<div class="spectrum-Article">
  <p class="spectrum-Heading1--quiet">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
  <p class="spectrum-Heading2--quiet">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
</div>

<div class="spectrum" lang="ja">
  <p class="spectrum-Heading1--quiet">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
  <p class="spectrum-Heading2--quiet">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
</div>

<div class="spectrum" lang="ar">
  <p class="spectrum-Heading1--quiet">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
  <p class="spectrum-Heading2--quiet">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
</div>

Typography - Heading (Strong)
Canon
CSS Verified

Strong headings for typography.

Heading1 Heading1 Emphasis Heading1 Strong.

Heading2 Heading2 Emphasis Heading2 Strong.

Article Heading1 Emphasis Strong.

Article Heading2 Emphasis Strong.

見出し1 見出し1 重点 見出し1 強い強調.

見出し2 見出し2 重点 見出し2 強い強調.

القسم القسم تشديد القسم تأكيد قو.

القسم القسم 1 تشديد القسم 2 تأكيد قو.

Show Markup 
<div class="spectrum" lang="en">
  <p class="spectrum-Heading1--strong">Heading1 <em>Heading1 Emphasis</em> <strong>Heading1 Strong</strong>.</p>
  <p class="spectrum-Heading2--strong">Heading2 <em>Heading2 Emphasis</em> <strong>Heading2 Strong</strong>.</p>
</div>

<div class="spectrum-Article">
  <p class="spectrum-Heading1--strong">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
  <p class="spectrum-Heading2--strong">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
</div>

<div class="spectrum" lang="ja">
  <p class="spectrum-Heading1--strong">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
  <p class="spectrum-Heading2--strong">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
</div>

<div class="spectrum" lang="ar">
  <p class="spectrum-Heading1--strong">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
  <p class="spectrum-Heading2--strong">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
</div>

Well
Precursor
CSS Unverified

The default variant for Well

Well Label (Optional)

Well done is better than well said.
Benjamin Franklin

Well said Ben! Well done is better than well said.
Benjamin Franklin

Well said Ben!
Show Markup 
<h3 class="spectrum-Heading--subtitle2">Well Label (Optional)</h3>
<span class="spectrum-Well">
  <em>Well done is better than well said.</em>
  <br>
  <strong>Benjamin Franklin</strong>
  <br><br>
  Well said Ben!
  <span class="spectrum-Well">
    <em>Well done is better than well said.</em>
    <br>
    <strong>Benjamin Franklin</strong>
    <br><br>
    Well said Ben!
  </span>
</span>